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. Los campos requeridos están marcados *


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