CSS заоблени кутийки

Автор: animatora

Здравейте, наложими се да направя кутийки със заоблени ъгли. Мислих над 2 варянта 4ист CSS i да изрежа кутията на три снимки и да ги навържа , което ми се стори по лесно, но впоследствие ми бавеше зареждането . търсих из тета и тук за урок за заобляне на кутийки но не намерих точното.

ето какво скалъпих:

<style>
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#D1E852; margin:0 5px;}
.b2 {height:1px; background:#D1E852; margin:0 3px;}
.b3 {height:1px; background:#D1E852; margin:0 2px;}
.b4 {height:2px; background:#D1E852; margin:0 1px;}
.content {background: #ddd;border:5px solid #D1E852;border-top:none;border-bottom:none;}
.content div {margin-left: 0px;}

.b12, .b22, .b32, .b42{font-size:1px; overflow:hidden; display:block;}
.b12 {height:1px; background:#ddd; margin:0 5px;}
.b22 {height:1px; background:#ddd; margin:0 3px;}
.b32 {height:1px; background:#ddd; margin:0 2px;}
.b42 {height:2px; background:#ddd; margin:0 1px;}
.content2 {height:130px;background: #ddd;border:0px solid #ddd;border-top:none;border-bottom:none;}
.content2 div {margin-left: 0px;}
</style>

<table width='150px'><td>
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<b class="b12"></b><b class="b22"></b><b class="b32"></b><b class="b42"></b>
<div class="content2">
<div></div></div>
<b class="b42"></b><b class="b32"></b><b class="b22"></b><b class="b12"></b>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</td></table>

надявам се да съм бил полезен