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

Сокращённое свойство border-image позволяет указать изображение в качестве рамки вокруг элемента.

Свойство border-image является одним из свойств CSS3.

Данное сокращённое свойство объединяет несколько отдельных свойств 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	object.style.borderImage = "url(border.png) 30 round"

Синтаксис

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

css

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

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://ru.w3docs.com/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="https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Результат

SS border-image Property

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://ru.w3docs.com/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(https://ru.w3docs.com/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(https://ru.w3docs.com/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="https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Что верно о свойстве CSS border-image согласно содержанию на указанном URL?

Свойство 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 требуется только одно значение.

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

Синтаксис ​

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

Результат ​

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

Значения ​