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
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/
[…] 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! […]
Ciao,
come mai non hai utilizzato dei “div” per contenere i quattro “bold” che formano i bordi arrotondati?
Grazie!