CSS и скуглости

http://dimox.name/examples/rounded_corners.html

Сглаженные закругленные углы без использования изображений


* {margin: 0; padding: 0}
body {
font: 14px/17px "Trebuchet MS", tahoma, arial;
text-align: justify;
}
a {color: #0094D6}
p {
text-align: center;
margin-top: 30px;
font-weight: bold;
font-size: 13px;
}
#v1, #v2, #v3 {
width: 500px;
margin: 30px auto 15px;
}
h1 {
font-size: 20px;
font-weight: normal;
text-align: center;
padding: 9px 0 14px;
}
#v1 h1 {color: #F40000;}
#v2 h1 {color: #DFDF00;}
#v3 h1 {color: #00AA00;}
.text {
border: 1px solid #B0BCC2;
border-width: 0 1px;
padding: 5px 10px;
}


/* 1-й вариант */
#v1 {
width: 480px;
border: 1px solid #B0BCC2;
padding: 7px 10px;
position: relative;
}
#tl, #tr, #bl, #br {
position: absolute;
width: 6px;
height: 5px;
}
#tl {
top: -1px;
left: -1px;
background: url(tl.gif) no-repeat;
}
#tr {
top: -1px;
right: -1px;
background: url(tr.gif) no-repeat;
}
#bl {
bottom: -1px;
left: -1px;
background: url(bl.gif) no-repeat;
}
#br {
bottom: -1px;
right: -1px;
background: url(br.gif) no-repeat;
}
* html #bl,
* html #br {
bottom: -15px;
}
/* 1-й вариант */


/* 2-й вариант */
.v1, .v2, .v3, .v4, .v5 {
height: 1px;
font-size: 1px;
display: block;
overflow: hidden;
border: 1px solid #B8C3C8;
border-width: 0 1px;

}
.v1 {margin: 0 5px; background: #B8C3C8;}
.v2 {margin: 0 3px; border-width: 0 2px;}
.v3 {margin: 0 2px;}
.v4 {margin: 0 1px;}
.v5 {margin: 0 1px;}
/* 2-й вариант */


/* 3-й вариант */
.b1, .b2, .b3, .b4, .b5,
.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,
.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,
.b1 q, .b2 q, .b3 q, .b4 q, .b5 q {
height: 1px;
font-size: 1px;
overflow: hidden;
border-style: solid;
border-width: 0 1px;
display: block;
}
.b1 {
margin: 0 2px;
background: #EBEEF0;
border: none;
}
.b1 b {
margin: 0 1px;
background: #B8C3C8;
border-color: #CBD3D7;
}
.b2 {margin: 0 1px; border-color: #D6DCDF;}
.b2 b {border-color: #B8C3C8;}
.b2 i {border-color: #E4E8EA;}
.b2 q {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 b {border-color: #BCC6CB;}
.b3 i {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 b {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 b {border-color: #FAFBFB;}
/* 3-й вариант */

Примеры к статье Сглаженные закругленные углы без использования изображений:

1. Закругление углов с помощью изображений

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

2. Простое закругление углов с помощью CSS

Здесь каждый угол состоит из пяти расположенных специальным образом пикселей, придающих углу закругление. Острый глаз замечает "угловатость" таких углов (простите за тавтологию).

3. Сглаженное закругление углов с помощью CSS

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