Este es el segundo artículo de la serie de CSS for n00bs, la vez pasada explique los conceptos de margin y padding, esta vez explicaré como crear esquinas redondeadas con CSS. Antes para poder crear este “efecto” se debía cortar imagenes de las esquinas, posicionar la imagen de forma absoluta y hacer miles de malabares sólo para poder imitar las esquinas redondas, ahora gracias a CSS3 esto se puede lograr con unas pocas lineas de código. Debido a que cada navegador renderiza de forma distinta, se deben aplicar diferentes propiedades para los diferentes navegadores, entonces por ejemplo tenemos a chrome y safari que utilizarían la propiedad -webkit-border-radius para mozilla sería -moz-border-radius, etc (aquí pueden encontrar los otros que significan como khtml).

Esquinas redondeadas.

Al poner un sólo valor en la propiedad significa que todas las esquinas serán redondas con ese valor.  Por ejemplo.

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px;
-khtml-border-radius: 10px; 

Ejemplo:

Esquina(s) redondedas, seleccionando la esquina.

Muchas veces este tipo de seleccion de esquina es muy util para crear menus, o diferentes estilos que todo el div redondeado.

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;

*No es necesario escribir los bordes de abajo, pero sólo demostrativo que en efectivo, esas esquinas no serán modificadas.

¿Han usado alguna vez este “efecto”?