Свойство border-image-outset позволяет отодвинуть рамку за пределы элемента. В качестве значения указывается число без указания единиц измерения либо любые единицы для размеров, кроме процентов. Если указано число без единиц, то оно является множителем, на который умножается значения свойства border-width. Отрицательные значения не поддерживаются.
Для более подробной информации по картинкам для границы смотрите свойство border-image.
Синтаксис
селектор {
border-image-outset: положительное число;
}
Пример . Число
Установим значение border-image-outset в 3 по наведению мышкой на элемент. При этом граница сдвинется на 26px*3 - в 3 раза дальше, чем ее ширина, заданная в border-width:
<div id="elem"></div>
#elem:hover {
border-image-outset: 3;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 100px auto;
}
:
Пример . Пиксели
Установим значение border-image-outset в 30px по наведению мышкой на элемент. При этом граница сдвинется на 30px:
<div id="elem"></div>
#elem:hover {
border-image-outset: 30px;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 50px auto;
}
:
Смотрите также
-
свойство border-image,
которое является сокращением для границы-картинки -
свойство border-image-source,
которое задает путь к картинке для границы -
свойство border-image-slice,
которое разбиение картинки для границы -
свойство border-image-repeat,
которое повторение картинки для границы -
свойство border-image-width,
которое задает размер картинки для границы