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.

Publicidad

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í:

Publicidad
.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.



También te interesaría...

Suscríbete a nuestra lista de correo

Etiquetas:

Publicidad

Deje un comentario