Border-radius: Diseño Web con CSS 3 - Bordes redondeados

Este tutorial debe visualizarse desde Firefox, Opera, Safari o Google Chrome.

Si usan un navegador como Firefox, Chrome u Opera podrán ver cuales son las capacidades de diseño de CSS3 aplicados a la etiqueta DIV de abajo, que entrarán este año con las nuevas versiones de los navegadores más usados, incluyendo a Internet explorer.
Las principales en cuestiones de diseño son las propiedades border-radius que permite bordes redondeados sin usar imágenes. (Opera es el único navegador que implementa las instrucciones border-radius conforme lo que será la especificación de CSS 3)

aquí

Primero veremos la propiedad que es bastante sencilla, actualmente para usarla en Firefox, Chrome y Opera deberemos anteponer la instrucción -moz y -webkit, aunque finalmente cuando la especificación se libere solamente tendremos que hacerlo con border-radius:

Por ejemplo en el siguiente cuadro en el estilo agregamos al atributo Style:

Style="
border-radius: 40px 60px 100px 100px;
-moz-border-radius: 40px 60px 100px 100px;
-webkit-border-radius: 40px 60px 100px 100px;
"

1       2
-
-
-
-
-
3      4

El código de colores corresponde al orden en que los valores afectas a las esquinas, esto es:

border-radius: esquina superior izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda.

¿Simple no?

Aclaraciones de uso
border-radius - Nombre del estándar bajo CSS (De momento solamente Opera)
-moz-border-radius - Navegadores bajo el motor de Mozilla (Firefox)
-webkit-border-radius - Navegadores bajo Webkit (Safari y Chrome)

Internet Explorer no soporta ninguna instrucción, a partir de Internet Explorer 9 se implementará.