CSS ha mejorado notablemente el diseño y desarrollo de páginas web. Hace unos años cuando creábamos tablas e imágenes y queríamos mejorar el aspecto haciendo las esquinas redondeadas, no nos quedaba mas remedio que recurrir a programas de edición gráfica para conseguirlo y luego hacer piruetas para ponerlas donde quisiéramos.
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.
Cómo hacer los bordes redondeados con CSS
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..
A partir de este ejemplo podemos jugar con los siguientes elementos:
- border-top-left-radius: Define la esquina superior izquierda.
- border-top-right-radius: Define la esquina superior derecha.
- border-bottom-right-radius: Define la esquina inferior derecha.
- border-bottom-left-radius: Defina la esquina inferior izquierda.
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: Para que las esquinas redondeadas aparezcan correctamente en todos los navegadores, hay que añadir una línea específica para cada uno:
- Para Chrome de Google y Safari de Apple: -webkit-border-radius.
- Para Firefox de Mozilla: -moz-border-radius.
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.
Si tienes cualquier duda no te cortes y ¡escribe un comentario! y recuerda, si te ha sido útil… ¡comparte!