You are here
Bordes redondeados en CSS 3 Sin categoría 

Bordes redondeados en CSS 3

Bordes redondeados en CSS 3

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.

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 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.

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)

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.

Related posts

Comments

Leave a Comment


*