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

3 Commenti

  1. […] 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! […]

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.