Vai al contenuto

Angoli arrotondati con CSS

Esistono diversi modi per ottenere una box html con angoli stondati (rounded corner) in CSS . Dall’utilizzo di immagini, che raffigurano gli angoli stondati, che poi vengono posizionate agli angoli dell’elemento desiderato, fino all’utilizzo del -moz-border-radius, purtroppo quest’ultimo visibile solo su browser Mozilla (Firefox).
Secondo me, il più interessante sistema per realizzare angoli tondi è quello messo in pratica da Alessandro Fulciniti. Grazie ad una serie di elementi viene ricostruita la smussatura degli angoli mantenendo validità XHTML e CSS e cross-browsing.

Angoli arrotondati con CSS senza immagini

Preparate il vostro “foglio” html pulito e immettete questo codice nello spazio dedicato al CSS:

b.rtop, b.rbottom{display: block; background: #FFF}
b.rtop b, b.rbottom b{display: block; height: 1px;
overflow: hidden; background: #76C2FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px}

Questo invece è il codice HTML. Come potrete notare vengono creati una serie di elementi che andranno a comporre il bordo arrotondato.

<div>
  <b class="rtop">
     <b class="r1"></b>
     <b class="r2"></b>
     <b class="r3"></b>
     <b class="r4"></b>
  </b>
  <!-- qui il contenuto effettivo -->
  <b class="rbottom">
     <b class="r4"></b>
     <b class="r3"></b>
     <b class="r2"></b>
     <b class="r1"></b>
   </b>
<div>

Questo sistema non esclude la possibilità di creare un bordo dal colore alternativo di un pixel di contorno al box arrotondato.
Se vogliamo trovare il pelo nell’uovo questo sistema non permette di ottenere un valido antialias sulle smussature degli angoli, ed il sistema è un po macchinoso se ripetuto spesso.

Nifty Corners: Angoli arrotondati senza immagini CSS + JS

Per ovviare al problema dell’antialias Alessandro Fulciniti ha creato tramite un piccolo Javascript un sistema che semplifica molto l’operazione. In questa pagina potrete trovare diversi esempi di utilizzo e le specifiche.

Alternative per creare angoli arrotondati ai box

Come già ho scritto in apertura dell’articolo, esistono molti modi per creare gli angoli arrotondati ad un DIV. Qui sotto vi elenco una serie di link che potrebbe tornarvi utile nel caso stiate cercando alternative.

Link esempi e guide

Link a generatori di angoli smussati

3 commenti su “Angoli arrotondati con CSS”

  1. Io da tempo uso la versione javascript che consigli qui sopra, mi sembra funzionare bene sulla maggior parte dei browser moderni, e non inficia il CSS della pagina 🙂

  2. @Sergio grazie, ho aggiunto alla lista i due link 😉

    @camu probabilmente è il metodo più comodo e funzionale per una soluzione senza immagini 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

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