¿Quieres aprender a redondear bordes en CSS? En el artículo de hoy te contamos a qué elementos puedes aplicarles un borde y los diferentes estilos de bordes que podemos utilizar. Sigue leyendo y lleva tus diseños web al siguiente nivel.
¡Vamos allá!
Índice de Contenidos
Qué es el borde de un elemento HTML
El borde de un elemento HTML es la línea que rodea el contenido de un elemento, como un cuadro que delimita un párrafo, una imagen o un botón. Los bordes pueden ser utilizados para separar visualmente los elementos en una página web, para resaltar un elemento en particular o para crear una sensación de profundidad y estructura. Todo ello es muy útil a la hora de diseñar una página web, y es necesario conocer los estilos que se les pueden dar a los bordes en CSS para conseguir los resultados que buscamos.
Definir los bordes con CSS
Como ya sabrás, el CSS, u hojas de estilo en cascada, es un lenguaje utilizado para dar estilo a los elementos de una página web. Y los bordes son un elemento más que puede definirse con CSS utilizando la propiedad «border». Esta propiedad acepta tres valores: ancho, estilo y color. De esta manera, jugando estos tres valores en la propiedad, podremos crear un sinfín de posibilidades con las que conseguir el estilo que necesitemos en cada diseño.
A continuación te presentamos un ejemplo de diferentes posibilidades a la hora de crear bordes en un enlace de HTML:
See the Pen Redondear bordes en CSS by HTML Masters (@htmlmasters) on CodePen.
Como vemos en el ejemplo anterior, además de definir el ancho y el color, la propiedad «border» nos ofrece diferentes estilos de bordes entre los que poder elegir para poder aplicarlos a nuestro gusto en cada elemento. Además de los tres que vemos en el ejemplo anterior, existen todos estos valores para los bordes:
- solid: Este será el que utilicemos normalmente por defecto cuando busquemos un borde en línea que delimite nuestro contenido.
- dotted: Nos ofrece la posibilidad de crear una línea de puntos al rededor de nuestro elemento.
- double: Este valor crea una doble línea al rededor del contenido.
- dashed: Lo mismo que «dotted» pero con líneas cortas en lugar de puntos.
- groove: Genera un borde con sombras que crea un relieve en la línea que rodea el elemento. Actualmente, está en desuso, ya que recuerda mucho a los primeros diseños de web y ha quedado obsoleto, por lo que, a menos que el objetivo del diseño sea ese, no suele utilizarse.
- ridge: Similar al estilo «groove» pero con diferentes zonas de iluminación.
- inset: Genera la sensación de que el elemento está hundido.
- outset: Al contrario que el estilo «inset» crea la sensación de que el objeto está hacia afuera.
Cómo redondear bordes con CSS: border-radius
Además de definir el ancho, estilo y color del borde, también es posible redondear los bordes con CSS. Para ello, se utiliza la propiedad «border-radius». La propiedad «border-radius» define el radio de los bordes de un elemento, lo que permite crear bordes redondeados. Cuanto mayor sea el valor del la propiedad «border-radius» mayor será el redondeo de las esquinas del elemento.
See the Pen Border-radius by HTML Masters (@htmlmasters) on CodePen.
El valor de la propiedad «border-radius» puede ser un solo valor para redondear todos los bordes, o cuatro valores separados para definir el radio de una de las esquinas de un elemento.
See the Pen Diferentes border-radius by HTML Masters (@htmlmasters) on CodePen.
Ejemplo de enlace con bordes redondeados con CSS
Como puedes ver, con una regla CSS muy sencilla, se puede aplicar un borde redondeado para los enlaces. Esta propiedad junto con las del color de fondo, las fuentes personalizadas, el tamaño y las animaciones es muy útil para hacer que los enlaces sean más llamativos y destaquen en el contenido de la página web. Gracias al uso de los bordes redondeados con CSS podemos mejorar la apariencia y la usabilidad de nuestro sitio web.
A continuación te enseñamos algunos ejemplos de lo que puedes hacer con los enlaces o botones de tu página web para conseguir que sean un buen CTA (Call to action o llamada a la acción) para tus usuarios, y que su experiencia de usuario sea lo mejor posible:
See the Pen Diferentes border-radius by HTML Masters (@htmlmasters) on CodePen.
Conclusión
Como hemos visto en el artículo de hoy, definir el estilo de los bordes de los elementos de nuestro sitio web es muy sencillo. Jugando con la apariencia de los bordes de los diferentes elementos de la estructura de nuestro sitio web, conseguiremos crear los diseños que queramos y mejorar la usabilidad y la accesibilidad de nuestra página web, para que las personas que accedan a ella tengan la mejor experiencia de usuario.
Esperamos que tras leer este artículo puedas crear todos todo tipo de diseños de enlaces con CSS. En caso de tenerlas, no dudes en dejar tus dudas en los comentarios.
¡Hasta la próxima!
