XCondividi su Facebook
XCondividi su Twitter
XCondividi su Google Plus
XCondividi su Linkedin
7Condividi su Facebook
14Condividi su Twitter
3Condividi su Google Plus
10Condividi su Linkedin

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

Altri 3 commenti su “Angoli arrotondati con CSS
  1. camu ha detto:

    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 ha detto:

    Ciao, io da tempo ho risolto il problema con gli ottimi tutorials su Sickbrain.org

    http://www.sickbrain.org/css-e-xhtml/box-liquido-con-angoli-arrotondati/
    e questo http://www.sickbrain.org/css-e-xhtml/box-liquido-con-angoli-arrotondati-ii/ e devo dire che mi hanno sempre salvato ore e ore di stress :-)

    Io lo consiglierei, oltretutto è un Italiano e quindi ci si può chiedere aiuto e delucidazioni ;-)

  3. DesMM ha detto:

    @Sergio grazie, ho aggiunto alla lista i due link ;)

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

Segui Desmm
+ Segnala un
progetto
DesMM © 2002 - 2018 Design by Massimo Mastromarino.

Google font directory + Google Font API

È disponibile WordPress 3.0