Свойство CSS border-image

Сокращённое свойство border-image позволяет использовать изображение — или CSS градиент — в качестве рамки элемента вместо обычной сплошной линии. Это одно из свойств CSS3.

На этой странице рассматривается принцип работы свойства (лежащая в его основе модель девяти фрагментов), синтаксис сокращённой записи, несколько интерактивных примеров, а также случаи, когда стоит применять border-image.

Как работает border-image: модель девяти фрагментов

Основа работы border-image — разбивка на девять частей (nine-slicing). Браузер берёт исходное изображение и разрезает его четырьмя линиями — двумя горизонтальными и двумя вертикальными — на девять областей:

4 угла размещаются в четырёх углах элемента и никогда не растягиваются и не повторяются.
4 стороны (верхняя, правая, нижняя, левая) заполняют пространство между углами. Они растягиваются, повторяются, скругляются или распределяются в зависимости от значения border-image-repeat.
1 центральная часть по умолчанию отбрасывается, поэтому сквозь элемент виден его фон. Добавьте ключевое слово fill к border-image-slice, чтобы её сохранить.

Положение линий разбивки задаётся свойством border-image-slice. Благодаря этой модели небольшое изображение декоративной рамки может обернуть блок любого размера без искажения углов.

Важно: border-image отображается только тогда, когда у элемента действительно есть рамка. Необходимо задать элементу border-style (или сокращённое свойство border) со значением, отличным от none — например border: 10px solid transparent; — иначе ничего не появится.

Сокращённое свойство и его подсвойства

Это сокращённое свойство объединяет несколько отдельных свойств border-image. Пропущенные значения принимают начальные. Примечания по каждому подсвойству приведены ниже:

border-image-source — если значение равно «none» или изображение не может быть отображено, будут использованы стили рамки.
border-image-slice — центральная часть изображения считается полностью прозрачной, если не задано значение «fill».
border-image-width — если значение этого свойства больше значения border-width элемента, изображение рамки будет выходить за край padding (и/или content). Следует также учитывать, что это свойство может принимать одно, два, три или четыре значения.
border-image-outset — может также принимать одно, два, три или четыре значения.
border-image-repeat — может задаваться двумя значениями. Если второе значение опущено, оно считается равным первому. При одном значении оно применяется ко всем четырём сторонам; при двух значениях первое применяется к верхней и нижней сторонам, второе — к левой и правой.

Свойство	Значение
Начальное значение	none 100% 1 0 stretch
Применяется к	Всем элементам, кроме внутренних элементов таблицы, когда border-collapse равно «collapse». Также применяется к ::first-letter.
Наследуется	Нет
Анимируется	Нет
Версия	CSS3
DOM Syntax	object.style.borderImage = "url(border.png) 30 round"

Синтаксис

Синтаксис свойства CSS border-image

border-image: source slice width outset repeat | initial | inherit;

Пример свойства border-image:

Пример свойства CSS border-image

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">border-image: 10% round;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства border-image с несколькими значениями:

Пример свойства CSS border-image с различными значениями

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 30%;
        border-image-repeat: repeat;
        border-image-width: 15px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 20%;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 15%;
        border-image-repeat: space;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image example with all values.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Попробуйте сами »

Использование CSS-градиента в качестве рамки

border-image-source принимает градиент наряду с URL, поэтому можно создать красочную рамку без какого-либо файла изображения. Градиент обрабатывается точно так же, как изображение, и разбивается на части по тем же правилам.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .gradient-border {
        border: 12px solid transparent;
        padding: 15px;
        border-image: linear-gradient(45deg, #1095c1, #f7df1e) 1;
      }
    </style>
  </head>
  <body>
    <p class="gradient-border">A border drawn from a CSS gradient.</p>
  </body>
</html>

Цифра 1 после градиента — это значение border-image-slice. Поскольку у градиента нет реальных краёв для защиты, разбивка со значением 1 просто отображает четыре стороны и углы на рамке без искажений.

Когда использовать border-image

Используйте border-image, когда одного сплошного цвета недостаточно:

Декоративные или тематические рамки — витиеватые, нарисованные от руки или рваные рамки, которые невозможно создать с помощью border-style.
Рамки с градиентом — см. пример выше; гораздо проще, чем имитировать это с помощью оборачивающего элемента и background-clip.
Повторяющиеся узоры — небольшая плитка, которая оборачивает блоки любого размера благодаря модели девяти фрагментов.

Для простых скруглённых углов используйте border-radius; для обычной цветной линии — стандартное сокращённое свойство border: они легче и поддерживают анимацию, тогда как border-image — нет.

Значения

Значение	Описание	Демо
border-image-source	Задаёт исходное изображение для создания рамки. Это может быть URL, data URI, CSS-градиент или встроенный SVG.
border-image-slice	Задаёт способ разбивки изображения, указанного в border-image-source. Изображение всегда делится на девять частей: четыре угла, четыре стороны и центр.	Play it »
border-image-width	Задаёт ширину изображения рамки.
border-image-repeat	Задаёт, повторяется ли изображение рамки, скругляется или растягивается.	Play it »
initial	Устанавливает свойство в значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Поддержка браузерами

border-image поддерживается во всех современных браузерах (Chrome, Edge, Firefox, Safari и Opera). Поскольку оно корректно возвращается к заданным значениям border-style/border-color, его можно применять поверх обычной рамки как прогрессивное улучшение: старые или неподдерживающие браузеры покажут обычную рамку, новые — изображение.

Практика

Что верно в отношении свойства CSS border-image?

Свойство CSS border-image является сокращённым свойством для задания отдельных свойств изображения рамки — border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat — в одном объявлении.Свойство border-image не позволяет разработчикам указывать изображение для использования в качестве рамки элемента.Свойство border-image можно использовать со всеми HTML-элементами.Свойство CSS border-image не поддерживает анимацию и не применяется к элементам таблицы, когда border-collapse установлено в collapse.Свойству CSS border-image достаточно одного значения для работы.