CSS-свойство border-image определяет, как изображение должно использоваться вместо border-styles. Это короткое свойство для одновременной установки свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat.

Значение по умолчанию: none 100% 1 0 stretch
Применяется к: Все элементы, кроме внутренних элементов таблицы, когда border-collapse установлен collapse. Это также относится к ::first-letter.
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства border-image:

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("border.png") 30 30 round;
} 

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
border-image-source Определяет местоположение изображения, которое будет использоваться для border.
border-image-slice Определяет смещение внутрь от верхнего, правого, нижнего и левого краев изображения границы.
border-image-width Определяет ширину border.
border-image-outset Определяет величину, на которую область изображения границы выходит за границы рамки.
border-image-repeat Определяет, как средняя часть изображения границы масштабируется или выкладывается мозаикой, чтобы она могла соответствовать размеру границы.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента border-image-width.

Поддержка браузеров

Свойство border-image поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.