Entre sus muchas funciones, CSS también permite dar forma a los bordes de los elementos, lo que puede mejorar considerablemente el aspecto visual de una página web. Una de las técnicas más populares en este campo es el redondeo de bordes, que se puede lograr con facilidad utilizando la propiedad «border-radius«.
En este artículo, aprenderás todo lo que necesitas saber para redondear bordes en CSS y mejorar tus habilidades de diseño web.
¿Cómo funciona la propiedad «border-radius»?
Antes de sumergirnos en el proceso de redondear bordes en CSS, es importante entender cómo funciona la propiedad «border-radius». Esta propiedad establece el radio (o curvatura) de los bordes de un elemento en píxeles, porcentajes o valores «em».
Por ejemplo, si queremos que los bordes de una caja tengan un radio de 10 píxeles, podemos escribir el siguiente código:
border-radius: 10px;
Si quisieramos que solo los bordes superiores izquierdo y derecho sean redondeados, podríamos escribir el siguiente código:
border-top-left-radius: 10px; border-top-right-radius: 10px;
Además, podemos usar un solo valor para especificar un radio para los cuatro bordes a la vez:
border-radius: 10px 20px 30px 40px;
Este código establecería un radio de 10px para el borde superior izquierdo, 20px para el borde superior derecho, 30px para el borde inferior derecho y 40px para el borde inferior izquierdo.
Ahora que tenemos una comprensión básica de cómo funciona la propiedad «border-radius», veamos cómo podemos aplicar el redondeo de bordes en diferentes elementos en una página web.
Redondeo de bordes en cajas
Las cajas son uno de los elementos más comunes en una página web y, por lo tanto, es importante saber cómo redondear sus bordes utilizando CSS. Para empezar, creemos una caja div en nuestro HTML con un ancho y altura definidos:
<div class="caja">Soy una caja redondeada</div>
Ahora, en nuestra hoja de estilos CSS, agreguemos un borde de 2 píxeles y un radio de bordes de 10 píxeles a esta caja:
.caja {
border: 2px solid black;
border-radius: 10px;
width: 200px;
height: 200px;
}
¡Voilà! Nuestra caja ahora tiene bordes redondeados. También podemos aplicar el redondeo de bordes a otros elementos, como botones, imágenes y formularios utilizando el mismo principio.
Redondeo de bordes en texto
Otra forma de utilizar la propiedad «border-radius» es para dar un efecto de redondeo a los bordes del texto. A menudo, esto se aplica a títulos o subtítulos en una página web. Para lograr esto, podemos utilizar la propiedad «background-clip» en conjunto con «border-radius». La propiedad «background-clip» especifica cómo se mostrará el fondo de un elemento, y al establecerla en «text», nos permite aplicar el redondeo de bordes solo al texto dentro de ese elemento.
Por ejemplo, imaginemos que tenemos un título h1 en nuestro HTML:
<h1 class="titulo">Mis títulos son redondeados</h1>
En nuestra hoja de estilos CSS, podemos agregar el siguiente código para darle un fondo degradado y bordes redondeados a nuestro título:
.titulo {
background: linear-gradient(to right, #f9a825, #00796b);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
border-radius: 10px;
}
El resultado será un texto con bordes redondeados y un fondo degradado que se ve moderno y elegante.
Redondeo de bordes en imágenes
También es posible aplicar el redondeo de bordes a las imágenes de una página web. Esto puede ser especialmente útil para destacar una foto o un logotipo y darle un aspecto más suave. Para ello, podemos utilizar la propiedad «overflow» en conjunto con «border-radius». La propiedad «overflow» controla cómo se muestran los contenidos cuando superan los límites de su contenedor. Al establecerla en «hidden», permitimos que los bordes de la imagen sean redondeados.
Por ejemplo, si tenemos una imagen en nuestro HTML:
<img src="imagen.jpg" alt="Logo empresa">
En nuestra hoja de estilos CSS, podemos aplicar el redondeo de bordes de la siguiente manera:
img {
border-radius: 50%;
overflow: hidden;
}
La imagen ahora tendrá bordes totalmente redondeados, dando un efecto de círculo alrededor de ella.
Comentarios finales
El redondeo de bordes en CSS es una técnica efectiva para mejorar el aspecto visual de una página web. Con la propiedad «border-radius«, podemos aplicar bordes redondeados a diversos elementos, como cajas, texto e imágenes.
Además, al combinar esta propiedad con otras como «background-clip» y «overflow«, podemos lograr efectos aún más sorprendentes.
Es importante recordar que el diseño no se trata solo de estética, sino también de funcionalidad. Por lo tanto, siempre debemos asegurarnos de que el redondeo de bordes no afecte la usabilidad de la página web.
Esperamos que este artículo te haya proporcionado una comprensión completa de cómo redondear bordes en CSS y cómo utilizar esta técnica de forma efectiva en tus proyectos de diseño web. ¡Empieza a experimentar y lleva tus habilidades de diseño al siguiente nivel!
