[B~Vladi]

Я тоже когда-то наткнулся на такой трюк, потом расковырял всё это дело и понял, в чём тут фикус. Подробно не буду описывать, т.к. лень, но если кто-то захочет в этом разобратся сам - опишу.
Взамен хотел бы скинуть вам простую функцию, которая просто поможет всё это понять.

function createEle(ele,tag,className){
	var e=document.createElement(tag);
	e.className=className;
	ele.appendChild(e);
}
function createRainbow(e,top){
	var r=createEle(e,'div',(top)?'rtop':'rbottom');
	if(top) for(i=14;i>=0;i--) createEle(r,'div','r'+i);
	else for(i=0;i<=14;i++)	createEle(r,'div','r'+i);
}

Функция createEle просто в помощь, так что не придерацца.
Использовать так:
1. У нас есть див (div).
2. В этот див генерим верхние углы: createRainbow(div,true).
3. Вставляем туда див для контента: createEle(div,'div',className).
4. Генерим нижние углы: createRainbow(div).

Вот стили:

.r1, .rbottom .r0{
	height:1px;
}
.r10 {
	margin:0 8px;
	height:1px;
}
.r11 {
	margin:0 9px;
	height:1px;
}
.r12 {
	margin:0 11px;
	height:1px;
}
.r13 {
	margin:0 13px;
	height:1px;
}
.r14 {
	margin:0 16px;
	height:1px;
}
.r2 {
	margin:0 1px;
	height:3px;
}
.r3{
	margin:0 2px;
	height:2px;
}
.r4, .r5 {
	margin:0 3px;
	height:1px;
}
.r6 {
	margin:0 4px;
	height:1px;
}
.r7 {
	margin:0 5px;
	height:1px;
}
.r8 {
	margin:0 6px;
	height:1px;
}
.r9 {
	margin:0 7px;
	height:1px;
}
.rbottom {
	width:100%;
	overflow:hidden;
}
.rtop {
	width:100%;
	overflow:hidden;
}
.rtop div, .rbottom div{
	background:#000;
	overflow:hidden;
}

Этот пример не претендует на широкое использование. Запостилось для того, чтобы вы сами могли во всём разобраться и не мучиться с левыми библиотеками. После осознования сего, вы сами сможете написать полноценную либу скругления углов у дива.