Cómo hacer bordes redondeados con CSS

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.

Como hacer bordes redondeados con CSS

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.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.