Свойство border-image

Последнее обновление: 29.12.2010

Свойство border-image — сокращенный способ задать свойства границы border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, позволяет одновременно задать фоновое изображение границы элемента, разбить его на фрагменты, указать размер контура и его способность выходить за пределы границы элемента, а также указать способ отображения боковых фрагментов и центра фонового изображения.

иллюстрация border-image элемента
иллюстрация border-image элемента (изображение сделано
полупрозрачным, чтобы было видно отличие от border)

Допустимые значения

Значение по умолчанию не определяется для составных свойств
Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

.block {
border-image: (http://www.mpbox.ru/assets/images/logo.jpg) 13 1 9 13 / 10px 1px 6px 10px / 3px 0 3px 3px stretch round;
}
Твой код:
Результат:
большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3 и выше и Chrome 1 и выше поддерживают похожее свойство -webkit-border-image, а Firefox 1.0 и выше -moz-border-image. Единственное отличие — это невозможность указать необязательный параметр border-image-outset, а также непрозрачная середина рисунка.

Частично поддерживает свойство border-image только Opera с версии 10.5 по 11.01. Реализована поддержка только обязательных параметров. При этом значение border-image-width будет равно border-width, а центральная часть рисунка будет видимой и будет повторяться или растягиваться в зависимости от отображения боковых сторон. Opera 11.01 в прямом виде это свойство не поддерживает, а поддерживает вендорное свойство -o-border-image.

По теме

Показать комментарии