Border-image - свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.

Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.

Upd: В Firefox работают начиная с 29-й версии .

Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.

Если задать только border-image-source , картинка заполнит собой уголки, не зная что ей делать дальше:

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

Важное свойство, которое определяет размер куска изображения, которое заполнит углы рамки. Остальные части будут использованы для заполнения пространства между углами по алгоритму, заданному в border-image-repeat .

Возможные значения:

<проценты> - рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты. <числа> - пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. fill - ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. Очень полезно для округлых рамок.

Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.

Сумма значений противоположных сторон должна быть меньше размера картинки, иначе будет нечем заполнять пространство между углами.

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Border-image-repeat

Свойство определяет как будут заполняться промежутки между углами.

Возможные значения: stretch - растягивает заполняющий участок картинки. Значение по умолчанию; repeat - повторяет заполняющий участок, при этом видны места стыков с угловой картинкой; round - заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие. space - действует похоже на repeat . Разницы не обнаружила.

Можно задать два значения сразу, первое будет отвечать за поведение картинки в верхней и нижней рамке, второе - за левую и правую.

Border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: repeat;

Слева repeat , справа round .

Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее, вот пример .

Border-image-width

border-image-width

Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width , картинка рамки заползет под содержимое, даже если не заданно свойство fill .

Возможные значения: <длина> - значения в px или em; <%> - значения в процентах относительно размера изображения; <числа> - числовое значение, на которое умножается border-width auto - ключевое слово. Если оно задано, значение равно соответственному border-image-slice . Если подходящего размера нет, используется значение border-width , при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; border-image-width: 160px;

Справа рамка с border-image-width . На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.

Border-image-outset

Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.

Возможные значения: <длина> - значения в px или em; <числа> - числовое значение, на которое умножается border-width .

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;

Справа пример с border-image-outset . Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы.

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

Синтаксис

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

document.getElementById("elementID ").style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Одним из занятных приложений свойства CSS3 box-shadow является создание двойной рамки вокруг элемента. Очень интересный эффект для оформления страниц, Но работать он будет только в новых версиях браузеров, которые поддерживают box-shadow .

Однако существует еще несколько методов для создания такого эффекта. Причем очевидное использование фонового изображения является весьма далеким от идеала.

В данном уроке представлены пять методов для создания двойной рамки вокруг элемента. Причем только один из них требует изображение, а все остальные используют чистый код CSS с отличной поддержкой в браузерах.

Метод 1: border и outline

Данный метод работает только в тех браузерах, которые поддерживают свойство outline (все, кроме IE6/7). Вы добавляете элементу оба свойства border и outline .

One { border: solid 6px #fff; outline: solid 6px #888; }

Причина по которой данный метод работает заключается в том, что рамка outline всегда выводится с внешней стороны прямоугольника. Проблема свойства outline проявляется при использовании плавающих элементов, так как рамка перекрывается с соседними элементами.

Метод 2: псевдо элемент

Данный метод требует абсолютного позиционирования рамки:

Two { border: solid 6px #fff; position: relative; z-index: 1; } .two:before { content: ""; display: block; position: absolute; top: -12px; left: -12px; border: solid 6px #888; width: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10; }

Ключевыми моментами являются установка свойства z-index (чтобы псевдо элемент перекрывал содержание), позиционирование и значение min-height . Последнее свойство сохраняет эластичность рамки.

Метод 3: тень

Самый лучший метод, так как требуется только одна строчка кода с установками свойства box-shadow .

Three { box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; }

Для появления двойной рамки используются две тени. Они определяются через запятую. Размытие устанавливается в 0. Так как вторая тень перекрывается первой, то она имеет вдвое большую ширину. Ключевой момент - использование непрозрачных цветов, что создает четкую границу между рамками.

Как и свойство outline , box-shadow не влияет на соседние элементы и может перекрывать их. Поэтому надо установить поле для формирования внешнего вида композиции.

Естественно, поддержка свойства box-shadow ограничена новыми браузерами.

Метод 4: Дополнительный элемент div

В данном методе используется внешний элемент