user gravatar

Делаем закругленные углы или потрясающие возможности CSS3 border-radius

Закругленные углы через CSS свойство border-radius

В современных Web страницах можно делать потрясающие страницы вообще без применения изображений. В то время как на заре web 1.0 приходилось применять различные хаки с изображениями, чтобы банально закруглить углы.

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

Синтаксис

*border-radius* [<значение радиуса>]{1,4}

Скорее всего тут без примеров не обойтись.

Взять к примеру вот такой закругленный квадрат:

border-radius - закругленные углы через css

Чтобы сделать такое через CSS свойство border-radius:

#border-example {
    border-radius: 10px;
    background: #CCC;
}

Префиксы border-radius

Чтобы была возможность совместимости со старыми браузерами нужно применить префиксы: для браузеров с движком webkit -webkit- и для Firefox -moz-:

.rounded-corner {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Если посмотреть на этот код, то можно увидеть, что это почти тоже самое. Просто перед border-radius добавляется соответствующий префикс.

При определений свойства border-radius вы можете также указывать различные стороны углов.

.rounded-corners {
    border-radius: 6px 8px 15px 10px; /* верхний угол, левый, нижний и правый */
}