Bordes redondeados en CSS 3

  • Por
Las características de CSS 3 incluyen bordes redondeados, a través del atributo border-radius, que define la curvatura que debe tener el borde del elemento.
CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se permiten bordes con las esquinas redondeadas, bordes con imágenes (incluso varias imágenes se pueden utilizar para definir el aspecto del borde), sombras, etc.

En este artículo vamos a explicar cómo realizar bordes redondeados con CSS3.

Tenemos la propiedad border-radius, que permite definir bordes redondeados en las esquinas, especificando las medidas del radio que deben darse a la curva de las esquinas. Su uso sería aproximado al que vemos a continuación:

border-radius: 5px;

Definiría un radio de 5 píxeles en el redondeo de las esquinas del elemento. Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es:

-moz-border-radius

Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente, como en el caso de Firefox, sino que hay que utilizar un "alias": -webkit-border-radius.

Por lo que respecta a Internet Explorer hay que decir que todavía no soporta este atributo de CSS 3, pero esperemos que los chicos de Microsoft lo puedan implementar pronto en el navegador, o que las especificaciones de CSS3 pasen rápido al estado "Candidate Recommendation", que sería el llamamiento para que se implementen en la generalidad de los navegadores.

Por el momento, para navegadores Mozilla y WebKit que son los primeros en adaptarse a CSS3, podemos utilizar el atributo border-radius de la siguiente manera:

DIV {
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
}


Con esto conseguimos que todos los div tengan un borde redondeado en las esquinas de radio de 7 píxeles. Fijarse en el uso de los atributos -moz-border-radius y -webkit-border-radius, que sirven para lo mismo, pero en navegadores basados en Mozilla y basados en WebKit.

Podemos ver el ejemplo en una página aparte. Pero recordar que sólo se verá el efecto utilizando Firefox o navegadores basados en Mozilla.

Pero el atributo border-radius tiene otras posibles configuraciones, en la que se pueden definir los valores para el radio de las cuatro esquinas por separado. De esta manera:

-moz-border-radius: 7px 27px 100px 0px;

Así estaríamos definiendo un borde redondeado con radio de 7 pixel para la esquina superior izquierda, luego 27px para la esquina superior derecha, de 100px para la inferior derecha y 0px para la inferior izquierda. (Hay que explicar que un border-radius de 0px es un borde con esquina en ángulo recto)

Podemos ver este ejemplo en una página aparte.

Los bordes redondeados con CSS 3, como se podrá imaginar, sólo se ven si se tiene definido algún borde visible al elemento que se los asignamos, ya sea solid, dotted, etc. Eso es lo que definen las especificaciones de CSS3, aunque en el momento de escribir el artículo debo señalar que incluso Mozilla o Firefox (el único que por ahora soporta este atributo de CSS3) no funciona del todo correctamente con esto y sólo muestra los bordes redondeados con solid.

Otra cosa que definen las especificaciones de CSS y que por el momento no está funcionando del todo bien, es que las imágenes de fondo deben ajustarse a los bordes redondeados. Ocurre, por el momento, que las imágenes de fondo salen por fuera de los bordes redondeados. Confiamos en que en el futuro esto pueda ser revisado y optimizado, para que todo funcione correctamente. Debemos recordar que en el momento de escribir el artículo todavía se tienen que terminar de definir las especificaciones de CSS 3 y después, los navegadores web deberán actualizarse en un cierto espacio de tiempo para soportarlas completamente.

Nota: Ofrecimos una lista de las características principales de CSS 3 en el artículo Introducción a CSS3.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Eduardo

22/8/2009
compatibilidad
actualmente el atributo lo aceptan desde safari 3 y opera 9.1 tambien, yo les recomendaria descargar safari o firefox.

nublar

15/10/2009
Obsoleto por el momento
Cita:
"Pero recordar que sólo se verá el efecto utilizando Firefox o navegadores basados en Mozilla."

Entonces es algo totalmente obsoleto, no podemos hacer una pagina que solo la vea Firefox...... para hacer esto hay muchos metodos que son compatibles con la mayoria de navegadores

Carlos Eugenio

03/11/2009
Opera aún no lo reconoce
Siento contradecir el comentario de arriba en cuanto a Opera. Yo estoy usando Opera 9.64 y al ver los ejemplos no reconoce las esquinas redondeadas.

laura

04/4/2010
bordes
yo no lo pude ver con el chrome... :(

midesweb

08/7/2010
Obsoleto no es, sino todo lo contrario
Hola,

El comentario que titulan "obsoleto por el momento" habría que matizarlo, porque no puedes llamarle obsoleta a esta técnica, sino todo lo contrario.

Obsoleto es algo que ya no se usa o está desfasado, pero estas técnicas de CSS 3 aun están por llegar, a día de hoy. No todos los navegadores las implementan, pero en breve lo harán. Así que es algo que podremos utilizar libremente de aquí a poco tiempo. Mientras tanto, al menos podemos practicar y apreciar los resultados de lo que está por venir, en navegadores más modernos.

Si alguien lo desea utilizar está en su derecho y al menos funcionará en los navegadores más avanzados (osea, todos menos Internet Explorer).

Maxx48

21/8/2010
Obsoleto?
No creo que redondear esquinas desde CSS sea un recurso obsoleto. Al contrario. Os acordáis de la cantidad de código y trucos con div's e imágenes que habia que utilizar para representar esquinas redondeadas o crear sombras? En cambio ahora con una sola línea de código CSS es suficiente.
En cuanto a los navegadores, mientras el código no esté liberado por los "controladores" del lenguaje, cada navegador utiliza su código privado: "border-radius: #px #px #px #px;" precedido por "-webkit-" para Chrome y Safari, "-moz-" para Firefox y nada para los demás navegadores que lo soporten, incluido Opera. He visto en algun sitio el prefijo "-o-", pero no sé a qué navegadores va dirigido. Sobre iExplorer, ni idea.

SK

15/12/2010
Funciona en Firefox y en Chrome probado
con este codigo
DIV {
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
/*-moz-border-radius: 7px 27px 100px 0px; -- para definir el borde por esquina*/
}

Funciona bien en Chrome y Firefox

xxhegexx

12/7/2011
Distiintos navegadores
el border radius ya puede utilizarce en IE pero solo en la version ) es una pena que en las anteriores no se pueda usar para FIrefox es el moz para chrome y safari es el webkit y para el ie 9 solo el nombre estandar no necesita ninguna preposicion si en estos ejm no se ven en navegadores como el IE 9 o el chrome es porq el codigo en css solo esta con la preposicion moz que lo soporta unicamente el firefox

GNU-Tony

27/9/2011
Funcionando con Opera
ciertamente no lo tengo comprobado, pero al parecer en Opera también funciona
el codigo seria el siguiente:

-o-border-radius

Aroa

19/10/2011
Validador w3c
Esta opción no la valida el w3c!! cuando asi que tdv no podemos utilizarlas... estaría bien que esta organización se actualizara.

roger soto

21/12/2011
generador de Bordes redondeados en CSS 3
Yo uso por un tema de practicidad la siguiente web http://css3generator.com/
y no tengo probleamas

http://Rogersoto.com

Pancho Opcionweb

12/1/2012
creadores online de bordes redondeados css
Te dejo una recopilación con 16 creadores online de bordes redondeados y demás propiedades css. Espero que te parezca interesante.

http://www.opcionweb.com/index.php/2012/01/12/creadores-de-bordes-redondeados-css-online/

Un saludo.

LaytonLoss

18/1/2012
Opera
En Opera es border-radius

CESARDELSEGGIO

29/1/2012
Funciona en IE 9, Firefox y Chrome
Actualmente funciona en estos navegadores. Yo probé con "border-radius: 8px;" y funciona en los 3 navegadores, sin -moz- ni -webkit-.

wtd000

16/2/2012
Si Funciona
Gracias man. Prove y funciona con todos los navegadores, el codigo es este:
border-radius: 20px
y para la sombra:
box-shadow:#848484 0 3px 0

espero que esto les sea de utilidad.

Fredy ramirez

22/6/2012
Funciono muy bien
Les cuento que me fue de gran ayuda, solo me advertia con warning, pero al
usarlo ya no me molestaba.

pCGYVJzjqK

01/10/2012
QcSpMnBq
Buenas sarins,Seguro que HTC taarbjare1 en actualizar su buque insignia, que no es otro que el Desire HD, pero seguramente tendre9is que esperar un poco me1s que los usuarios de Nexus One (al ser e9ste un terminal de Google, sere1 el primero en recibir las actualizaciones) y como el Desire lleva una personalizacif3n del escritorio propia de HTC (Sense) seguramente tengan que taarbjar me1s para integrarla con Gingerbread.De todas formas, no te preocupes, y disfruta de las enormes posibilidades que te ofrece el Desire HD con Froyo. Ten en cuenta que el salto de Froyo a Gingerbread no supone una diferencia brutal.Un saludo.

luiscr269

12/2/2013
Pruebas con navegadores
He hecho pruebas con los siguientes navegadores:
- Firefox 18.0.2: funciona "border-radius" pero no funciona "-moz-border-radius"
- Chrome 24.0: funciona "border-radius" y "-webkit-border-radius"
- Explorer 8.0: no funciona nada.

Saludos.