Bordes redondeados con CSS3

Seguimos profundizando en las características del HTML5 y lo hacemos repasando una de las funcionalidades más útiles de CSS3 para diseño web: crear bordes redondeados. Esto lo podemos hacer directamente con el atributo border-radius, que define qué curva tiene que tener el borde del elemento al que se le aplica. Para ello, CSS3 añade novedades en el control de los bordes de los elementos, permitiendo esquinas redondeadas, bordes con imágenes, sombras, etc.

Si especificamos las medidas del radio con border-radius, tendremos la curvatura que deseemos de las esquinas del elemento. Aquí un ejemplo:

border-radius: 6px;

Aquí tendríamos un radio de 6 pixeles de redondeo para el elemento al que se aplica. Decir que en Mozilla, este atributo requiere un nombre especial y deberemos ponerlo de este modo:

-moz-border-radius

Chrome o Safari, que están basados en WebKit, soportan las esquinas redondeadas de CSS3, así que debemos uilizar: -webkit-border-radius. En el caso del navegador que nos falta, Internet Explorer, es soportado el atributo desde la versión 9,  por lo que versiones anteriores no podrán hacer uso de esta característica.

Para que funcione en todos por igual, podemos utilizar el atributo border-radius de la siguiente manera:

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

Con este ejemplo lograremos que todos los div tengan un borde redondeado en todas sus esquinas de un radio de 9 pixels. Hay que darse cuenta en cómo usamos los atributos -moz-border-radius y -webkit-border-radius, que permiten hacer lo mismo, pero como indicábamos antes, para navegadores basados en Mozilla y en WebKit.

Destacar también que podemos configurar el atributo border-radius de otras formas. Por ejemplo, podemos definir distintos radios para cada una de las esquinas. Lo podremos hacer de esta manera:

-moz-border-radius: 8px 30px 112px 0px;

La esquina superior izquierda tendría 8 pixels de radio, la esquina superior derecha sería de 30 pixels, 112px para la para la inferior derecha y dejaríamos (para que veáis el borde con esquina en ángulo recto) a 0px para la inferior izquierda.

Para que el elemento muestre los bordes redondeados con CSS3, deberá tener definido algún borde visible, ya sea solid, dotted, etc.

Por último, comentar que aunque ha ido mejorando con el tiempo, las imágenes de fondo deben ajustarse a los bordes redondeados, porque éstas se salen por fuera de los bordes redondeados. Esperamos que pronto pueda ser optimizado y que funcione de una forma correcta.

Actualmente, todos los navegadores (en sus últimas versiones) soportan border-­radius sin necesidad de usar prefijos CSS, pero navegadores anteriores a  Internet Explorer 8 no soportan esta característica de forma nativa.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *