[CSS] Zaokrąglone rogi bez używania obrazków

.rog1, .rog2, .rog3, .rog4, .rog22, .rog32, .rog42{font-size:1px; overflow:hidden; display:block;}
.rog1 {height:1px; background:#aaa; margin:0 5px;}
.rog2, .rog22 {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.rog3, .rog32 {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.rog4, .rog42 {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.rog22, .rog32, .rog42 {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

<b class="rog1"></b><b class="rog2"></b><b class="rog3"></b><b class="rog4"></b>
<div class="headh">
<h3>Tekst na górze</h3>
</div>
<div class="contenth">
<div>Tekst na dole</div>
</div>
 
<b class="rog42"></b><b class="rog32"></b><b class="rog22"></b><b class="rog1"></b>