Runde hjørner uden grafik III

En teknik til at lave runde hjørner uden brug af grafiske elementer. I stedet bruges udelukkende CSS.

Html-kode

<div id="container">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b4"></b>
<div class="boxcontent">
<h1>Runde hjørner uden grafik III</h1>
<h2>En teknik til at lave runde ... </h2>
</div>
<b class="b4"></b>
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</div>

Stylesheet

div#indhold {margin:1em 10%; }
#container h1, #container h2 {margin:0 10px;}
#container h1 {font-size:2.5em; color:#fff;}
#container h2 {font-size:1.2em;color:#fff; border:0;}
#container h2 {padding-top:0.5em;padding-bottom:.5em;}
#container {background: transparent;}

.b1, .b2, .b3, .b4 {display:block; overflow:hidden;}
.b1, .b2, .b3, .b4 {height:1px;background:#369;}
.b1 {margin:0 5px;}
.b2 {margin:0 3px;}
.b3 {margin:0 2px;}
.b4 {margin:0 1px;}
.boxcontent {display:block;  background:#369;}

Denne eksempelside hører til artiklen Runde hjørner III