• Home
• Webmaster »
Tips Border Radius

angoli arrotondati

Sono previsti dagli standards CSS3. Finora sono supportati da Firefox (con il codice -moz-border-radius), da Opera (border-radius) e dai webkit-browsers (-webkit-border-radius) ma non da Internet Explorer.

Per essere visualizzato da quest'ultimo occorre utilizzare degli artifici più o meno complicati:

• o fermandosi al livello di “puro CSS”, ma in tal caso facendo uso di un codice decisamente “sporco” (un uso improprio del tag <b>);
• o usando delle immagini (soluzione quantomai sgradevole);
• o usando javascript (e allora il CSS resta abbastanza pulito, però ci sono degli svantaggi).

Dopo un po' di prove mi sono convinto che non è una strada da percorrere: meglio usare CSS3 e basta: chi se lo merita, usando un browser decente, come Firefox vedrà i bordi arrotondati, chi non se lo merita si arrangi.

esempi

usando in modo “sporco” il codice CSS

con il seguente style:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

applicato al seguente caso:

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
    <div class="contentf">
        <div>Round FILL!!</div>
    </div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

Si può ottenere quanto segue

Il codice usato è sporco perché si ripete per ben quattro volte a vuoto un tag, bold, il grassetto che dovrebbe essere usato per enfatizzare porzioni di testo; il tag dovrebbe contenere del testo e invece non contiene nulla: questo va contro l'idea di «web semantico», che dovrebbe ispirare chi realizza siti web.

Meglio dunque tirare per il colletto quelli di Microsoft perché si sbrighino a introdurre nei loro browsers i tag CSS3, tra cui border-radius.