7 linee di Css per i Rounded Corners

Ecco un metodo veloce e abbastanza pulito per fare dei bordi arrotondati in CSS senza l’uso di immagini.

Inserite il seguente css all’interno del vostro file oppure aggiungetelo al css che già usate.

.rtop, .rbottom{display:block; }
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px; background:#9BD1FA;}
.r2{margin: 0 3px; background:#9BD1FA;}
.r3{margin: 0 2px; background:#9BD1FA;}
.r4{margin: 0 1px; height: 2px; background:#9BD1FA;}
.contain{background:#9BD1FA;text-align:center;}

Poi all’interno del file html copiate questo e inserite il testo che volete far apparire.
Ovviamente potete cambiare le dimensioni, i colori e lo stile del rounded corners.

<div id="container" style="width: 100px;">
<strong class="rtop">
</strong><strong class="r1"></strong>
<strong class="r2"></strong>
<strong class="r3"></strong>
<strong class="r4"></strong>
<div class="contain">MAMBRO</div>
<strong class="rbottom">
</strong><strong class="r4"></strong>
<strong class="r3"></strong>
<strong class="r2"></strong>
<strong class="r1"></strong></div>

Ed ecco il risultato

Fonte: Haskho

CONDIVIDI
ARTICOLI CORRELATI
3 commenti a “7 linee di Css per i Rounded Corners”

Ciao,
come mai non hai utilizzato dei “div” per contenere i quattro “bold” che formano i bordi arrotondati?
Grazie!

Inviato da Christian il 28 maggio 2008 alle 16:37

[…] Volete fare dei box in CSS con dei bei bordi rotondi, magari il bordo e anche lo sfondo con gradiente (sfumato)? Poco tempo e poca voglia di capire come si fa o di prepararvi le gif necessarie? Nessun problema: questo tool fa al caso vostro. Un paio di configurazioni e in un battibaleno potete scaricarvi immagini, html e css. Scansafatiche del web cosa volete di più? Fare il box con gli angoli tondi solo con CSS? Per questo dovete leggere: css rounded corner! […]

Inviato da Web tool per web designer il 29 maggio 2009 alle 15:28

Preferisco andare di CSS puro, anche se non é compatibile IE, al diavolo quel browser maledetto!
http://it-things.com/index.php/2011/03/pure-css-rounded-corners-no-images/

Inviato da mred il 17 marzo 2011 alle 21:47
Lascia un commento

Captcha - risolvi l\'operazione per inviare il commento * Time limit is exhausted. Please reload CAPTCHA.