Bordes redondeados con CSS

Con la llegada de la version 3 de CSS, han aparecido nuevas e interesantes propiedades para manipular elementos. Una de ellas, es una propiedad que nos permite redondear los bordes de algunos elementos de nuestro HTML.

Entonces, para lograr una placa con bordes redondeados, solamente debemos crear un DIV con la medida que deseemos, y aplicar 2 propiedades para redondear sus bordes a nuestro gusto.

Estas propiedades son:

-moz-border-radius: valor;
-webkit-border-radius: valor;
border-radius: valor;

La primera “-moz-border-radius” se utiliza para el navegador Firefox, y la segunda “-webkit-border-radius” para los navegadores Safari y Chrome.

Los valores que aceptan esta propiedades son los pixeles de radio de la curva de cada uno de los 4 ángulos. Y se escriben en el siguiente orden: arriba-izq,  arriba-der, abajo-der, abajo-izq

Entonces si por ejemplo, quisiéramos dar 25px de radio a cada ángulo, el código CSS sería el siguiente:

-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border-radius: 25px;