En este tutorial te mostramos paso por paso cómo hacer bordes redondeados con CSS. Es un tutorial muy sencillo, donde aprenderás a utilizar la propiedad de CSS que permite redondear los bordes. Sigue leyendo y aprende cómo.
Bordes redondeados en un elemento
La propiedad de CSS para hacer bordes redondeados es border-radius. Por tanto, para poder crear bordes redondeados, hagamos un ejemplo sencillo.
Digamos que tenemos un DIV rojo de 150px por 150px. Para poder redondear sus bordes, podemos hacer lo siguiente:
<div class="caja"></div>
.caja{
width: 100px;
background-color: red;
border-radius: 15px;
}En este caso, hemos especificado un radio de 15px. Esto quiere decir que a todas las esquinas tienen un radio de 15px. Ten en cuenta que también puedes utilizar porcentajes. Por ejemplo: border-radius: 10%. Te recomiendo probar para que puedas ver cómo funciona.
Como puedes ver, esta forma hace que todas las esquinas tengan el mismo radio de borde.
Solo una o dos esquinas redondeadas
Si lo que necesitas es solo redondear una, dos o hasta tres esquinas, entonces debes especificar el border-radius para cada esquina. Lo harías así:
.caja{
width: 100px;
background-color: red;
border-radius: 15px 0px 15px 0px;
}Como puedes ver, ahora la propiedad border-radius tiene 4 valores. Cada valor corresponde a cada esquina, en orden horario: arriba izquierda, arriba derecha, abajo derecha, abajo izquierda. En este ejemplo, hemos colocado 15px de radio para la esquina de arriba izquierda y abajo derecha.
Además, si quisieras, puedes separar cada valor en una propiedad de CSS específica: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
Esto te va a permitir crear bordes redondeados de distintos radios en cada esquina. Te recomendamos probar por ti mismo, ya que solo de esa manera comprenderás como funciona la propiedad border-radius. Cualquier consulta, déjanos un comentario.
