Закруглённые углы

Закруглённые углы использовались для сжатия сплошных фоновых изображений или, для гибких блоков, многочисленных фоновых изображений, по одному на каждый угол, размещённых на нескольких вложенных элементах div. Ах, некрасиво. Ну, больше нет. Теперь, с помощью простого CSS, вы можете украсить свой дизайн большим количеством изгибов.

Радиус границы?

Да. Радиус границы. Однако не бойтесь — вам не обязательно иметь границы. Свойство border-radius можно использовать для добавления угла к каждому углу прямоугольника.

#marilyn {
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 20px;
}

И вот оно. Закруглённые углы, видите? Что ж, так и будет, если у вас толковый браузер.

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

Конечно, если вам действительно нужна граница…

#ok_a_border_then {
    border: 5px solid #8b2;
    width: 100px;
    height: 100px;
    border-radius: 5px;
}

Множественные значения

border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius также могут использоваться для определения конкретных углов.

Вы также можете определить все радиусы углов по отдельности с помощью списка значений, разделённых пробелом, по часовой стрелке от верхнего левого угла, точно так же, как и другие сокращённые свойства:

#monroe {
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 6px 12px 18px 24px;
}

Многозначный радиус границы

Используя два значения вместо четырёх, вы ориентируетесь на верхнюю левую и нижнюю правую части с первой длиной (или процентом) и верхнюю правую + нижнюю левую часть со второй.

Три значения? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Сокрушительный.

Internet Explorer версий 8 и ниже не поддерживается border-radius. Единственный способ справиться с этим ─ либо использовать дизайн в тех браузерах, в которых нет закруглённых углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на похожие свойства, такие как -webkit-border-radius и -moz-border-radius, которые предназначены для старых, почти не используемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К чёрту их.

Эллипсы

Не кажутся ли вам круги слишком квадратными? Вы можете указать разные горизонтальные и вертикальные радиусы, разделив значения символом “/”.

#nanoo {
        background: #fff;
        width: 100px;
        height: 150px;
        border-radius: 50px/100px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
}

Страницы в тему:

• Следующая страница: Тени
• Предыдущая страница: Внушительный урок CSS
• Тени: комбинированные закруглённые углы и тени? Насколько изящен CSS 3
• Свойство CSS: border-radius

Примеры CSS:

• Закруглённые углы
• CSS-переходы: использование border-radius цветов и RGBa