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
- Box liquido con angoli arrotondati
- Box liquido con angoli arrotondati (2)
- ThrashBox
- Even More Rounded Corners With CSS
- DomCorners
- Rounded corners in CSS
- Transparent custom corners and borders, version 2
- CSS Teaser Box
- News List
- CSS Liquid Round Corners
- Simple Box by tedd
- CSS and round corners: Making accessible menu tabs
- CSS and round corners: Borders with curves
- Mountaintop Corners
- Rounded corners javascript
- Resizable box with freely stylable corners and surface
- Smart Round Corners
- Lean and Clean CSS boxes
- Rounded borders without images
- Rounded corners in CSS
- Curvy corners
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 🙂
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 😉
@Sergio grazie, ho aggiunto alla lista i due link 😉
@camu probabilmente è il metodo più comodo e funzionale per una soluzione senza immagini 😉