Bordes redondeados en CSS 3

10/7/08 - 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

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

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, el atributo border-radius se utilizaría, por ejemplo, así:

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

Con esto conseguimos que todos los div tengan un borde redondeado en las esquinas de radio de 7píxeles.

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ía, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba