Bordi arrotondati senz utilizzo di immagini 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 senza l'utilizzo di immagini

Codice

<html>
<head>
<style type="text/css">
body {
font-size: 12px;
font-family: verdana;
}

div.quadrato {
position:relative;
width: 9em;
margin: 3px;
background-color: #E6E6E6;
}

div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner {position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#E6E6E6; line-height: 40px;}

div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}

div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}

div.quadrato-contenuto {position: relative; padding: 8px; color:#000;}
</style>
</head>
<body>

<div class="quadrato">
<div class="top-left-corner"><div class="top-left-inside">•</div></div>
<div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>
<div class="top-right-corner"><div class="top-right-inside">•</div>v/div>
<div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>
<div class="quadrato-contenuto">
Testo da mettere dentro il quadrato arrotondato
</div>
</div>
</body>
</html>


Correlati

3 Comments

paskuale

25. Jan, 2008

bah … sarà ma non funzia … ho fatto un semplice copy&paste dentro dreamweaver ma poi l’html non và … !!!!

:S

lukio

06. Feb, 2008

In effetti oltre ad esserci qualche problemino nella visualizzazione, c’è anche qualche problema a livello di codice…peccato!

ciao

27. Mar, 2009

non è un gran che amico mio, mi dispiace, però non farne un dramma, davvero non avrebbe senso…. ti voglio bene!!!

Leave a reply