border-image: граница-картинка

Рамка из фрагментов изображения вместо сплошной линии.

Уровень: продвинутый 10 разделов 15 минут

1. Что это и зачем

Рамка из фрагментов изображения вместо сплошной линии.

Каждый элемент — прямоугольник с четырьмя зонами: содержимое, padding, border и margin. Итоговый размер зависит от box-sizing; раскладка объединят эти прямоугольники в поток, а position и float вырывают их из него.

{title} — это то, что даёт «дышать» содержимому; слишком маленькие поля делают страницу тесной.

2. Синтаксис и пример

.frame { border: 15px solid transparent; border-image: url(frame.png) 30 round; }

Запись выше — базовый вариант использования. Обратите внимание, как border-image: граница-картинка вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Padding лежит внутри границы, margin — снаружи, между соседями. Стандартные шорткаты позволяют задавать стороны сразу, а физические значения при желании заменяются логическими.

В реальной разметке border-image: граница-картинка встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это то, что даёт «дышать» содержимому; слишком маленькие поля делают страницу тесной.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Базовые свойства бокса работают во всех браузерах. box-sizing: border-box стал стандартом де-факто; устаревшие приёмы вроде float-колонок лучше не использовать.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Slice режет картинку по рамкам-линиям.

Нужен качественный slice — координаты критичны.

7. Практическое задание

Вставьте дека-рамку из картинки.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.frame { border: 15px solid transparent; border-image: url(frame.png) 30 round; }

8. Как применять в проектах

Раскладка собирается из блоков с разумными отступами: контейнер ограничивает ширину, внутренние блоки — свои padding. position: sticky и absolute решают отдельные микро-задачи.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

box-sizing: border-box задан глобально;
margin и padding не дублируют друг друга на соседях;
выходящий за экран контент скрыт только где нужно;
границы и тени не «прыгают» при hover;
высоты и ширины не рвут адаптивность;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам