Cantonades rodones amb css

Amb la versió 3 de CSS (CSS3) es podràn crear perfils arrodonits.
La propietat CSS3 que ho permetrá és

border-radius

I les seves derivades

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

Ara per ara no està soportat ni per FireFox ni per Internet Explorer. Diria que tampoc per Opera ni Safari. (Ara funciona amb Safari?)

No obstant Firefox de moment implementa un equivalent amb el prefix -moz-

-moz-border-radius: 1em;

Al final del post teniu enllaços a més informació sobre CSS3 i aquestes propietats.


Faig un exemple:

CSS

.cantonadaRodona
{
background-color: #c33;
-moz-border-radius: 15px; /*Firefox*/
border-radius: 15px; /*CSS3*/
border: 1px solid #000;
padding: 10px;

}

HTML

<div class="cantonadaRodona">
<h1>Capa amb les cantonades arrodonides</h1>
</div>

Capa amb les cantonades arrodonides

Amb Internet Explorer no funciona

Modificant els valors de -moz-border-radius i l'amplada i l'alçada de les capes podem aconseguir circumferències.



Enllaços d'interès:
- W3C: CSS3 propietat border-radius [EN]
- -moz-border-radius [EN]
- border-radius exemples [EN]