Bordi arrotondati con i css

Posted on 28. Apr, 2006 by Administrator in css, tutorials


Obiettivo

In questo articolo tratteremo come creare un box con bordi arrotondati con i css

Codice

<html>
<head>
<style type="text/css" media="all">
.snazzy {background:transparent;}
.snazzy span {text-align:center; color:#000; margin:0; font-weight:normal;}
.b1, .b2, .b3, .b4 {display:block; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}

.bianco{background:#cecece;}

#navigation2 {width:600px;background:transparent; margin:1em auto; height:30em; background:#fff;font-size:12px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
.pad {display:block; height:1em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
</style>

<div id="navigation2">
<b class="pad"></b>
<b class="snazzy">
<b class="b1"></b>
<b class="b2 bianco"></b>
<b class="b3 bianco"></b>
<b class="b4 bianco"></b>
<span class="boxcontent bianco">Home Page Home PageHome PageHome Page<br>Home Page<br>Home Page</span>
<b class="b4 bianco"></b>
<b class="b3 bianco"></b>
<b class="b2 bianco"></b>
<b class="b1"></b>
</b>
</div>
</body></html>


Correlati

Leave a reply