CSS - Tạo Khung Bo Tròn

Vấn đè là ta muốn tạo một khung cho văn bản hay khung ảnh mà gốc của khung không phải là gốc vuông mà là gốc bo tròn ( góc vuông bi cắt xén đi phần chốt nhọn ) thì ta làm sao ? CSS sau sẽ giúp bạn làm điều đó .

Demo:

<html>
<head>
<style type="text/css">
div#conner {
margin: 0 2%;background:blue;/* mau nay phri giong mau duoi*/
}
b.rtop, b.rbottom {
display:block;background:#FFF;/* mau nay khong thay doi*/
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;

background:blue;/* mau nay phai giong mau tren*/
}
b.r1 {
margin: 0 5px /* le trai +phai = 0, tren +duoi =5 */
}
b.r2 {
margin: 0 3px
}
b.r3 {

margin: 0 2px
}
b.r4 {

margin: 0 1px
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;height: 2px
}
</style>
</head>

<body>
<div id="conner" align="center">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<h4> Noi de viet cai khi kho gi do </h4>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>

</body>
</html>