CSS3: angoli stondati

Una rapida carrellata di opzioni sugli angoli arrotondati: opzione ormai ampiamente diffusa e che css3 ci permette di realizzare con estrema semplicità, ovviamente non aspettiamoci troppo dai vecchi internet explorer.

7 div ciascuno con una soluzione diversa:

• nel primo la proprietà base con il valore del raggio della stondatura identico sui 4 angoli
• il secondo arrotonda solo i due angoli sopra, dalla proprietà si evince come procedere per gli altri due angoli
• il terzo presenta quattro stondature diverse partendo dal top-left e procedendo in senso orario
• nel quarto esempio il raggio è pari a metà larghezza e quindi il risultato è un cerchio
• il quinto è identico al quarto solo che abbiamo inserto un’immagine di background
• il sesto propone per i quattro angoli una stondatura diversa per il raggio orizzontale e per il raggio verticale
• il settimo e ultimo esmepio è ientico al primo ma con quattro soluzioni diverse una per ciascun angolo

Il codice

<style>
body{font: 12px Verdana;}
div{ background-color:#993300; width:200px; height:200px; margin:20px; float:left;}
#box1{ border-radius:20px;}
#box2{ border-top-left-radius:20px; border-top-right-radius:20px;}
#box3{ border-radius:10px 20px 30px 40px;}
#box4{ border-radius:100px;}
#box5{ border-radius:100px; background-image:url(images/bg.jpg);}
#box6{ border-radius:20px/100px;}
#box7{ border-radius:20px 30px 40px 50px/60px 70px 80px 90px;}
</style>

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>

L’esempio