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

❮ Назад Вперед ❯

Сокращенное свойство border-image дает возможность установить изображение как границу для элемента. Данное свойство устанавливается с помощью других свойств 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
Применяется	Применяется ко всем элементам, кроме элементов внутренней таблицы, когда установлено значение collapse для свойства border-collapse. Также применяется к ::first-letter.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.borderImage = "url(border.png) 30 round"

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p class="border">border-image: 10% round;</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

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

Пример с разными значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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 со всеми значениями.</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>

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

Значения

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