Руководство по свойству border в CSS3

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

В этом разделе описываются эти новые свойства границ CSS3, для ознакомления с другими свойствами, связанными с границами см. Руководство по свойству border в CSS.

Свойство border-radius

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

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

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

Свойство border-image

Свойство 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;
}