Скругленные уголки

Я недавно рассказывал про тени. Теперь расскажу про еще одно популярное свойство CSS 3.0, скругленные уголки. Для скругления углов используют свойство border-radius:

.class1 {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 50px;
width: 100px;
height: 100px;
background: #0c9aec;
}

Пока CSS 3.0 не занял твердое положение, я использую расширения CSS для браузеров: -moz- и -webkit-. Значение свойства border-radius – это радиус скругления, вот к примеру элемент с более скругленными краями:

.class2 {
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
margin: 50px;
width: 100px;
height: 100px;
background: #0c9aec;
}

Если указать два значения через, то получим эллиптические уголки. Первое значение это радиус по вертикали, второй радиус по горизонтали:

.class3 {
border-radius: 30px/10px;
-moz-border-radius: 30px/10px;
-webkit-border-radius: 30px/10px;
margin: 50px;
width: 100px;
height: 100px;
background: #0c9aec;
}

Вот более наглядный пример. Слева круглые уголок, справа эллиптический уголок:
Можно задавать разные значения для каждого уголка отдельно, указав четыре значения. При этом первое значение отвечает за верхний левый угол, второе за верхний правый, затем нижний правый и последнее значение отвечает за нижний левый угол.

.class4 {
border-radius: 10px 0 0 0;
-moz-border-radius: 10px 0 0 0;
-webkit-border-radius: 10px 0 0 0;
margin: 50px;
width: 100px;
height: 100px;
background: #0c9aec;
}

К сожалению и здесь браузер Internet Exploer 8 и ниже не поддерживает тень. Остальные распространенные браузеры последних версий тени поддерживают.