border-image
CSS свойство border-image
Поддержка браузеров
Описание
Свойство border-image используется для указания значений таких свойств, как: border-image-source, border-image-width, border-image-slice, border-image-outset и border-image-repeat в одном объявлении. Данные свойства можно использовать, например для создания красивых кнопок.
Если какое-либо значение было не установлено, то оно будет установлено в значение по умолчанию для соответствующего свойства.
Значение по умолчанию: | none 100% 1 0 stretch |
---|---|
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.borderImage="url(border.png) 30 30 round" |
Значения свойства
Значение | Описание |
---|---|
border-image-source | Указывает путь к изображению, которое будет использоваться в качестве границ рамки. |
border-image-slice | Смещение изображения границы внутрь. |
border-image-width | Определяет ширину для изображения-границы. |
border-image-outset | Указывается величина, на которую распространяется область изображения-границы за пределы границ элемента. |
border-image-repeat | Определяет, как будет отображаться изображение, заданное для рамки: растягиваться, повторяться или масштабироваться. |
div{ border-width:15px; width:250px; padding:10px 20px; } #round{ -moz-border-image:url("chrome.png") 30 30 round; /* Firefox */ -webkit-border-image:url("chrome.png") 30 30 round; /* Safari и Chrome */ -o-border-image:url("chrome.png") 30 30 round; /* Opera */ border-image:url("chrome.png") 30 30 round; }