Runde hjørner uden grafik III

Eksempel 3

Html-kode

<div id="container">
<b class="b1"></b>
<b class="b2"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<div class="boxcontent">
<h1>Runde hjørner uden grafik III</h1>
<h2>Eksempel 3</h2>
</div>
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b2"></b>
<b class="b1"></b>
</div>

Stylesheet

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

.b1, .b2, .b3, .b4 {display:block; overflow:hidden;height:1px;}
.b1 {background:#00c8ec;margin: 0 4px;}
.b2, .b3, .b4 {background:#ffd16f; border-style:solid;
    border-color:#00c8ec}
.b2 {margin:0 4px; border-width:0 1px;}
.b3 {margin:0 3px; border-width:0 1px;}
.b4 {margin:0;border-width:0 3px;}
.boxcontent {display:block;  background:#ffd16f; 
    border-width:0 1px;border-style: solid;border-color: #00c8ec;}

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