Закругленные углы онлайн урок.


# Стандарт:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

# Индивидуальные уголки:

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;

# Сокращение:

-moz-border-radius: [вверху слева] [вверху справа] [внизу справа] [внизу слева]

-moz-border-radius: 10px 20px 30px 0;

# Эллиптическое округление (Firefox 3.5+):

-moz-border-radius-topleft: [горизонтальный радиус] [вертикальный радиус];

-moz-border-radius-topleft: 10px 40px;

# Эллиптическая округляющая стенограмма (Firefox 3.5+):

-moz-border-radius: [горизонтальный радиус] [вертикальный радиус];

-moz-border-radius: 10px / 40px;

-moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;

Выше - это то же самое, что:

-moz-border-radius-topleft: 10px 15px;
-moz-border-radius-topright: 20px 30px;
-moz-border-radius-bottomright: 30px 45px;
-moz-border-radius-bottomleft: 40px 60px;

# Эллиптическое округление WebKit

Все углы:

-webkit-border-radius: 36px 12px;

Только правые углы:

-webkit-border-top-right-radius: 50px 30px; 
-webkit-border-bottom-right-radius: 50px 30px;