CSS/Скругленные углы

Материал из Викиверситета
< CSS
Перейти к навигации Перейти к поиску

Для скругления углов существует свойство border-radius.

<!-- Допустим, у нас есть некий класс .block. Пусть это будет div. Хотя, дескриптор абсолютно не важен -->
.block {
border-radius:15px;
}


Это простая реализация. Указав один раз, что мы хотим скруглить элемент класса block на 15 пикселей, и загибаются все 4 угла. При необходимости скругления отдельных углов, рекомендуется указывать значение свойства более подробно.

Детальное скругление[править]


<!-- Скругляем верхние углы -->
.block {
border-radius:15px 15px 0px 0px;
}


<!-- Скругляем нижние углы -->
.block {
border-radius:0px 0px 15px 15px;
}


Ограничения[править]

Скругление не будет работать в IE.