Nu er det ikke l?ngere n?dendigt og benytte grafiske elementer for og lave runde hj?rner til sine box p? sin hjemmeside. Her er et eksempel p? hvordan det kan g?res.
Download billederne samt kodefilerne her. CSS Runde Hjørner (215)
CSS
<style type="text/css">
div#cramme{background-color: #e7e7e7; width:134px; text-align:center; float:left; margin:5px;}
b#ctop, b#cbottom{display: block; background-color: #FFFFFF}
b#ctop b, b#cbottom b{display: block; height: 1px; overflow: hidden; background-color: #e7e7e7}
b#c1{margin: 0 5px}
b#c2{margin: 0 3px}
b#c3{margin: 0 2px}
b#ctop b#c4, b#cbottom b#c4{margin: 0 1px; height: 2px}
.img{margin-top:3px;}
#div#cramme2{height:124px;}
</style>
HTML
<div id="cramme">
<b id="ctop"><b id="c1"></b><b id="c2"></b><b id="c3"></b><b id="c4"></b></b>
<div id="cramme2"><div><img src="img/img1.gif" class="img"></div></div>
<b id="cbottom"><b id="c4"></b><b id="c3"></b><b id="c2"></b><b id="c1"></b></b>
</div>
<div id="cramme">
<b id="ctop"><b id="c1"></b><b id="c2"></b><b id="c3"></b><b id="c4"></b></b>
<div id="cramme2"><div><img src="img/img2.gif" class="img"></div></div>
<b id="cbottom"><b id="c4"></b><b id="c3"></b><b id="c2"></b><b id="c1"></b></b>
</div>
<div id="cramme">
<b id="ctop"><b id="c1"></b><b id="c2"></b><b id="c3"></b><b id="c4"></b></b>
<div id="cramme2"><div><img src="img/img3.gif" class="img"></div></div>
<b id="cbottom"><b id="c4"></b><b id="c3"></b><b id="c2"></b><b id="c1"></b></b>
</div>