Края (Border) в CSS3

С CSS3 можно приложить изображения к рамкам элементов.

Использование рамок CSS3

CSS3 предоставляет два новых свойства, которые позволяют стилизовать рамки элементов более изящным образом - border-image используется для добавления изображений в рамку свойства border-radius, а также для создания закругленных углов без использования изображений.

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

Создание закругленных углов в CSS3

Свойство border-radius можно использовать для создания закругленных углов. Это свойство обычно определяет форму углов внешней рамки. До CSS3 для создания сложных закругленных углов использовались разрезанные изображения.

.box {
　　　　width: 300px;
　　　　height: 150px;
　　　　background: #ffb6c1;
　　　　border: 2px solid #f08080;
　　　　border-radius: 20px;
}

Добавление bordr-image в CSS3

Свойство border-image позволяет вам指定 изображение для использования в качестве рамки элемента.
Дизайн рамки создается из сторон и углов изображения, указанного в URL источника 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;
}