Tutorial: Cómo hacer bordes redondeados con CSS

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:

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:

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:

Si por ejemplo aplicamos un borde tipo inset quedaría de esta manera:

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!