Bordes redondeados CSS3

Técnica de Bordes Redondeados CSS.


CSS3 (la nueva versión de CSS) aporta innumerables mejoras en la manipulación de la parte visual dentro de un documento web. Y una de las mas usadas,es la propiedad que nos permite redondear los bordes de los elementos HTML.

Esta propiedad se llama “border radius”.
La misma acepta 4 valores correspondientes al radio de la curvaturade cada una de las 4 esquinas en el siguiente orden:

arriba-izq, arriba-der, abajo-der, abajo-izq

Por ejemplo, para lograr bordes redondeados con un radio de 15 px, la sintaxis CSScompleta seria para “border radius”, seria:

?
1
border-radius: 15px 15px 15px 15px;
Aquí realizaremos un ejemplo de un DIV (caja) cuyos bordes estarán redondeados.
Para ellosnecesitamos crear un DIV, y luego aplicarle las propiedades de “border radius” y un color de fondo.

Primero entonces definiremos dentro de nuestro HTML, un DIV normal llamado “caja”:

?
1Luego aplicaremos al mismo, la correspondientes propiedades CSS:

?
1
2
3
4
5
6
7
8
9
10
11
12
#caja {
background-color: #F00;
height: 200px;
width: 200px;
padding: 10px;/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
/* para Opera */
border-radius: 15px 15px 15px 15px;
}Aplicamos aquí un color de fondo rojo (#F00), un alto de 200px, un ancho de 200px, y unos bordes redondeados de 15 px de radio en cada esquina.

Como puedes ver, antes de “border radius” hecolocado un prefijo “-moz”, y otro “-webkit”.

Estos prefijo sirven para que “border radius” sea compatible con Firefox (-moz), y con Chrome y Safari (-webkit). Para el navegador Opera, nohace falta ningún prefijo.

Como seguramente ya te estarás dando cuenta, CSS3 es extremadamente potente y tiene una sintaxis muy simple que nos permite realizar efectos muy atractivos.