/* элементы закругления */
 
.inner-box {
	padding:1em; 
}
 
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
	display: block;
	height: 1px;
	overflow: hidden;
	font-size:1px;
}
 
.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
 
/*
 
возможные комбинации
 
r3 r1 r1 вверху
r1 r1 r3 внизу
 
r5 r3 r2 r1 r1 вверху
r1 r1 r2 r3 r5 внизу
 
r10 r7 r5 r4 r3 r2 r2 r1 r1 r1 вверху
r1 r1 r1 r2 r2 r3 r4 r5 r7 r10 внизу
 
однако не стоит ограничивать полет фантазии только этими вариантами, возможны и другие комбинации и не только скругление углов, но и множество других эффектов.
 
*/
 
#rounded-box-3, #rounded-box-5, #rounded-box-10 { margin:0.2em; }
 
.inner-box, b { background-color: #eeeeee;}
 
/* уменьшаем отступы по мере роста радиуса закругления */
#rounded-box-3 .inner-box { padding: 1em;}
#rounded-box-5 .inner-box { padding: 0.7em 1em;}
#rounded-box-10 .inner-box { padding: 0.4em 1em;}