| |
|---|
|
|
Los bordes redondeados que utilizan casi todos los sitios de la nueva Web 2.0 han dejado de ser una complicada maraña de imagenes recortadas metidas dentro de tablas, gracias al CSS3 se pueden implementar con una sola línea de código en la hoja de estilos.
Hoy en día el navegador es el que genera los bordes redondeados con CSS y unas pocas lineas de código sin que tengamos que hacerlo con programas externos, esto mejora significativamente la velocidad de carga de la página web al no emplear imágenes externas y nos ahorra trabajo a la hora de hacerlas. Gracias a la opción border-radius podemos definir el radio que tendra cada esquina de un objeto determinado, como se aprecia de seguido:
Cómo hacer los bordes redondeados con CSS
Como ya lo mencioné, para hacer bordes redondeados con CSS, hemos de emplear la propiedad border-radius.
Un ejemplo básico sería el siguiente:
[code language=»css»]
#esquinas_redondeadas {
border-radius: 20px;
}
[/code]
Aplicándolo a un contendedor div, el resultado sería el siguiente:
Ejemplo básico
Como vemos en el ejemplo, a la propiedad border-radius le asignamos un valor de 20px que serán los píxeles cuadrados que se aplicarán en las cuatro esquinas..
Como en muchas de las propiedades CSS, los bordes redondeados permiten 5 opciones diferentes, una para cada borde individual y una quinta para todos los bordes del objeto. La sintaxis a usar es la siguiente:
▪border-top-right-radius : 5px; /* Define la esquina superior derecha, con un radio de 5 pixels */ ▪border-bottom-right-radius : 5px; /* Define la esquina inferior derecha, con un radio de 5 pixels */ ▪border-bottom-left-radius : 5px; /* Define la esquina inferior izquierda, con un radio de 5 pixels */ ▪border-top-left-radius : 5px; /* Define la esquina superior izquierda, con un radio de 5 pixels */ ▪border-radius: 5px; /* Define los 4 bordes, con un radio de 5 pixels */
Por ejemplo, si modificamos el valor de las cuatro esquinas:
[code language=»css»] #esquinas_redondeadas {
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 30px;
} [/code]
El resultado es el siguiente, cada esquina tiene un valor distinto y por tanto, una forma distinta:
Ejemplo básico
Importante: Si bien la sintaxis acá expuesta es la definida por la W3C para la nueva implementación de CSS3 y por tanto todos los navegadores deberían ser compatibles, sucede que para que las esquinas redondeadas aparezcan correctamente en todos ellos, se requerirá utilizar los prefijos exclusivos de cada motor, que consiste en añadir una línea específica para cada uno, tal como se define de seguido:
Mozilla Firefox y similares
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft
-moz-border-radius
Apple Safari y Google Chrome
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-webkit-border-top-left-radius
-webkit-border-radius
Opera
-o-border-radius
Aunque las últimas versiones de Opera, al parecer, soportan el border-radious sin usar prefijo alguno.
Navegadores KHTML (Linux)
-khtml-border-radius
Y el Internet Explorer??
Por supuesto, Microsoft sigue haciendo lo que mejor sabe, ignorar por completo las definiciones de la W3C en referencia a los estándares web, así es que el Internet Explorer en todas sus versiones, no reconoce las propiedades de bordes redondeados.
Sin embargo, hay una vuelta de tuerca para poder utilizar estas propiedades CSS y que el Iexplorer las reconozca.
Los archivos de comportamiento (con extensión .htc) son desarrollados por terceros, que se llaman desde el código para indicarle al navegador de Microsoft que debe hacer cuando encuentra una propiedad que no está soportada por defecto. Se puede descargar desde aquí.
Se utiliza de la siguiente forma:
behavior:url(border-radius.htc);
En resumen
Este es el código completo de un bloque de datos con los bordes redondeados, compatible con la mayor cantidad de navegadores posibles.
El codigo HTML:
<div class="curvas">Bloque de datos con los bordes redondeados</div>
Las hojas de estilo CSS:
.curvas {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
behavior:url(border-radius.htc);
}
Aplicando un poco de estilo a las esquinas redondeadas
Una vez que ya sabemos como hacer bordes redondeados con CSS, es el turno de darle un poco de estilo, para ello usaremos la propiedad border-style.
Tenemos varios estilos disponibles que son los siguientes:
- solid: para un borde sólido.
- dotted: para ponerlo punteado.
- dashed: si lo queremos con guiones.
- double: un borde doble.
- groove: nos saldrá ranurado.
- inset: un borde por dentro.
- outset: el borde tiene efecto por fuera.
Y ahora vamos con el ejemplo práctico, vamos a generar un contenedor con un borde doble y esquinas redondeadas. El código sería el siguiente:
[code language=»css»] #esquinas_con_estilo {
border-radius: 20px 10px 50px 30px;
-webkit-border-radius: 20px 10px 50px 30px;
-moz-border-radius: 20px 10px 50px 30px;
border: 10px double;
} [/code]
En la primera línea he indicado los cuatro valores para las cuatro esquinas en la propiedad border-radius, en la segunda y tercera linea le indico al navegador Chrome, Safari y Mozilla el valor de las esquinas como he explicado mas arriba. Y en la última línea especifico el valor del borde y el estilo double.
El resultado sería el siguiente:
borde doble
Si por ejemplo aplicamos un borde tipo inset quedaría de esta manera:
borde inset
Y hasta aqui el tutorial para que puedas hacer bordes redondeados con CSS sin tener que recurrir al photoshop.
Fuentes. https://alfonsopuig.es/bordes-redondeados-con-css/ http://www.federicoperichon.com.ar/bordes-redondeados-con-css
