Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 IV

Esquinas redondeadas

Una de las novedades más demandadas por los diseñádores web es la de poder poner directamente en los elementos que configuran la página esquinas redondeadas. En nuestro curso CSS de Aprende Web ya hemos tratado el tema, en la página Trucos CSS/esquinas redondeadas Si echas un vistazo a la página, verás que hablamos ya de las esquinas redondeadas en CSS3. Como explicamos en la página anterior, CSS3 dispone una nueva propiedad para crear esquinas redondeadas: border-radius. Vamos a explicarla a continuación.

Propiedad border-radius

La propiedad border-radius permite crear, no sólo esquinas redondeadas, sino también elípticas. En realidad tenemos un conjunto de propiedades, una para cada esquina, que pueden aunarse en una propiedad tipo "shorthand", que es border-radius.

Las propiedades para cada esquina son:

Los valores que daremos a estas propiedades son medidas, normalmente en píxeles, que indican el radio del arco que aplicamos. También podemos indicar porcentajes, en este caso el 100% sería el total de la altura o anchura del elemento al que se aplica.

Podemos poner un valor (medida) o dos. Si ponemos una medida, la esquina quedará de forma circular, tomando la medida como radio. Si ponemos dos medidas, la esquina quedará de forma elíptica, de forma que la primera medida muestra el radio horizontal y la segunda el radio vertical.

Estos son algunos ejemplos de cómo podemos escribir estas propiedades:

Propiedad border-radius tipo "shorthand"

Podemos utilizar la propiedad border-radius tipo "shorthand" para definir las cuatro esquinas a la vez:

border-radius: 10px;

Este ejemplo define las cuatro esquinas del elemento con un redondeo en circular de 10px. Este es el ejemplo más simple, sin embargo esta propiedad puede admitir varios valores para las diferentes esquinas:

Para crear esquinas elípticas pondremos dos valores separados por una barra inclinada ( / ), correspondiendo el primer valor al radio horizontal y el segundo al radio vertical.

border-radius: 10px / 5px;

Además a cada lado de la barra inclinada ( / ) podemos poner de uno a cuatro valores (medidas o porcentajes) que tendrán el siguiente significado:

Con esto podemos escribir en una sóla propiedad tipo "shorthand" las cuatro esquinas con distintos valores para cada una de ellas.

Compatibiliidad en navegadores

Desde hace algun tiempo esta propiedad puede usarse de forma experimental en los navegadores Firefox, Safari y Chrome. Lo de "forma experimental" viene porque no se aplica directamente.

En Firefox debemos poner el prefijo -moz- Por lo que escribiremos: -moz-border-radius.

De forma análoga en Safari y Chrome debemos usar tambien un prefijo: -webkit-, por lo que escribiremos -webkit-border-radius.

Sin embargo tanto Firefox como Chrome y Safari han actualizado ya esta propiedad en sus últimas versiones (en octubre 2011), adoptando la forma estándar border-radius.

El navegador Opera hasta hace poco tiempo no soportaba esta propiedad, sin embargo en su última versión (Opera 11) también la incorpora.

Sólo falta Internet Explorer, que en su version actual (IE 8) no reconoce la propiedad, sin embargo todo apunta a que en la nueva versión (Internet Explorer 9) se introduzcan esta y algunas otras propiedades de CSS3.

El problema actual está, aparte de Internet Explorer, en que muchos usuarios no tienen sus navegadores actualizados a la última versión, por lo que durante algún tiempo, y mientras CSS3 se generaliza, los diseñadores deberemos recurrir a diversos trucos para crear esquinas redondeadas que se puedan ser vistas por la gran mayoría de usuarios.

Ejemplos de esquinas redondeadas

En el siguiente enlace mostramos una página en la que se muestran variass cajas con esquinas redondeadas (debes utilizar un navegador compatible para poder verlas bien). Debajo de ellas mostramos el código utilizado para crear las cajas:

Esquinas redondeadas.






En la siguiente página veremos como personalizar los bordes con imágenes en un mismo elemento:

Imagen en los bordes.



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo