Redondear bordes con CSS

19/Mar/2011 CSS , 9 Comentarios

Gracias a CSS3 podemos redondear los bordes de los elementos. Y es que para redondear bordes con CSS3 utilizaremos la propiedad border-radius.

La sintaxis general de border-radius es la siguiente:

  1. border-radius: [tamaño|porcentaje];

De esta forma podemos indicar el tamaño o porcentaje en el que se redondeará cada una de las esquinas de la capa. El valor corresponde con el radio de la circunferencia trazada en la esquina.

Así, si utilizamos:

  1. border-radius: 15px;

Veremos el siguiente resultado:

Border Radius

Podemos especificar un radio para cada una de las esquinas. En este caso se aplicará el orden de las agujas del reloj, empezado por la esquina superior izquierda, siguiendo por la esquina superior derecha, esquina inferior derecha y esquina inferior izquierda.

  1. border-radius: 5px 30px 45px 60px;

Si bien tenemos la capacidad de indicar el tamaño de cada de las esquinas por separado mediante:

  1. border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  2. border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  3. border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  4. border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

Cuando identificamos los radios de las esquinas por separado podemos indicar de forma diferente los dos radios que conforman la esquina. Por ejemplo, podríamos modificar la esquina superior izquierda de la siguiente forma:

  1. border-top-left-radius: 400px 200px;

Y obtendremos el siguiente resultado:

Border Radius

Si queremos modificar los dos radios de todas las esquinas podemos utilizar la versión reducida de border-radius:

  1. border-radius: [tamaño|porcentaje] {1,4} [tamaño|porcentaje] {1,4};

Por último tenemos que ser conscientes del soporte de la propiedad border-radius de CSS3. Ya que no todos los navegadores van a poder ejecutarla. En esos casos, los bordes que hayamos redondeado no se verán.

La implementación de border-radius que hemos visto es la de la W3C. Hay implementaciones propietarias en los motores de renderizado de los browsers. Este es el caso de mozilla. Dónde las propiedades para redondear los borders con CSS están especificadas como:

  1. -moz-border-radius: [tamaño|porcentaje];
  2. -moz-border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  3. -moz-border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  4. -moz-border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  5. -moz-border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

En el caso de Webkit (sería, por ejemplo, para versiones antiguas de Safari) se soportaba mediante el prefijo -webkit:

  1. -webkit-border-radius: [tamaño|porcentaje];
  2. -webkit-border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  3. -webkit-border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  4. -webkit-border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
  5. -webkit-border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

Por lo cual, si queremos buscar compatibilidad con nuestros ejemplos anteriores podemos poner lo siguiente:

  1. border-radius: 15px;
  2. -moz-border-radius: 15px;
  3. -webkit-border-radius: 15px;
  1. border-radius: 5px 30px 45px 60px;
  2. -moz-border-radius: 5px 30px 45px 60px;
  3. -webkit-border-radius: 15px;
  1. border-top-left-radius: 400px 200px;
  2. -moz-border-top-left-radius: 400px 200px;
  3. -webkit-border-radius: 15px;

Los navegadores a partir de los cuales se empezó a dar soporte a border-radius son:

  • Chrome 0.2 (con -webkit) y Chrome 4.0 (con el estándar)
  • Opera 10.5
  • Safari 3.0 (con -webkit) y Safari 5.0 (con el estándar)
  • Firefox 1.0 (con -moz) y Firefox 4.0 (con el estándar)
  • Internet Explorer 9

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

9 comentarios en “Redondear bordes con CSS”

Víctor Cuervo

Jorge G.

Muchas gracias, me ha parecido muy buena explicación.

Víctor Cuervo

Víctor Cuervo

Me alegro que sea entendible. Buscamos eso en los artículos. Gracias por tu comentario.

Víctor Cuervo

Albert

Muchas gracias, busqué por todos lados y no encontraba lo que en realidad necesitaba, me sirvió de mucho

Víctor Cuervo

Víctor Cuervo

@Adán Valenzuela Olaje, me alegro mucho que te haya servido. 😀

Víctor Cuervo

Adán Valenzuela Olaje

Gracias por la explicación, me ha sido de gran utilidad

Víctor Cuervo

Víctor Cuervo

@Ultiminio Ramos Galán,

Muchas gracias por el comentario. Me alegra que este bien explicado. 😀

Víctor Cuervo

Ultiminio Ramos Galán

Excelente artículo, la verdad muy bien explicado y fundamentado, felicidades.

Víctor Cuervo

Víctor Cuervo

@Harry,

Muchas gracias por el aviso. Se nos había ido la mano escribiendo. Solucionado. 😀

Víctor Cuervo

Harry

border-radiux: 15px;
-moz-border-radiux: 15px;
-webkit-border-radiux: 15px; …

no es radius?
gracias porel post!!

Los comentarios están cerrados.