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

Возьмем блок с идентификатором #bestanime, содержащий заголовок и нумерованный список:

<div id="bestanime">
        <h3>Top Three Anime DVDs</h3>
        <ol>
                <li>Ghost In The Shell
                <li>Spirited Away
                <li>Akira
        </ol>
</div>

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

div#bestanime {
        border: 5px double #000;
        border-radius: 20px;
}

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

div#bestanime {
	border: 5px double #000;
	border-top-right-radius: 30px;
}

Еще возможно задать свойству закругления рамки другие значения высоты и ширины, чтобы углы из полукруглых стали эллиптическими, что было использовано при создании изображения Евы, героини анимационного фильма ВАЛЛ-И, с использованием только CSS:

div#bestanime {
        border: 5px double #000;
        border-top-left-radius: 75px 60px;
}

Обратите внимание, свойство тени блока повторяет форму закругления рамки. А также два отдельных значения у свойства закругления рамки задают закругление углов следующим неожиданным образом: первое значение задает верхний левый и нижний правый углы элемента, а второе — верхний правый и нижний левый.

В старых версиях браузеров рамки с большими радиусами закруглений углов, значительной толщины и контрастных цветов выглядели несколько «ступенчато» из-за плохо работающего сглаживания при отображении эллипсов, но в современных версиях браузеров эта проблема не заметна.

Использование разных типов рамок с разных сторон у элемента может вызвать сложности, если к этим рамкам применяется свойство закругления рамки.

border-radius.com — понятный генератор кода для создания закругленных углов, у Mozilla Developer Network тоже есть подобный.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Двухмерные трансформации CSS: наклон, масштабирование и сдвиг
• Создание улучшенных диаграмм с помощью режимов наложения и SVG
• Создание наклонного меню с использованием только CSS