Border-radius скругляем углы с помощью css 3.

В Css3 появилось новое свойство border-radius. Border-radius позволяет легко делать скругленные углы без использования нескольких div и прочей ерунды.

Вот пример (пример может не работать в IE ниже 9 версии).

.test{
    border-radius:15px;
    padding:10px;
    background-color:#ebebeb;
}

Так же есть определения специфичные для браузеров.

.test{
    -moz-border-radius:15px;
}

Как работает свойство border-radius.

Радиус углов может быть указан у каждого в отдельности. Там же можно указывать различное скругление у сторон угла.

Синтаксис:

Примеры:

    border-top-left-radius: 5px 10px;
    border-bottom-right-radius: 15% 10%;
    border-top-right-radius: 5px;

Синтаксис для border-radius:

Примеры:

    border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
    border-radius: 5px;
    border-radius: 5px 10px / 10px;

Поддержка браузерами

Не работает в IE ниже 9 версии. В Mozilla версии ниже 3.5 нужна приставка -moz

Пример:

    -moz-border-radius
    -moz-border-radius
    -moz-border-radius-topleft
    -moz-border-radius-topright
    -moz-border-radius-bottomright
    -moz-border-radius-bottomleft

Примеры кроссбраузерности:

#A{
    height: 65px;
    width:160px;
    -moz-border-radius-bottomright: 50px;
    border-bottom-right-radius: 50px;
}
#B{
    height: 65px;
    width:160px;
    -moz-border-radius-bottomright: 50px 25px;
    border-bottom-right-radius: 50px 25px;
}
#C{
    height: 65px;
    width:160px;
    -moz-border-radius-bottomright: 25px 50px;
    border-bottom-right-radius: 25px 50px;
}
#D{
    height: 5em;
    width: 12em;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
}
#E{
    height: 65px;
    width:160px;
    -moz-border-radius: 25px 10px / 10px 25px;
    border-radius: 25px 10px / 10px 25px;
}
#F{
    height: 70px;
    width: 70px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}