Bordes en CSS

En CSS, los bordes se utilizan para crear líneas alrededor de los elementos HTML, lo que permite definir límites y darle estilo a los elementos. La propiedad border es una forma abreviada de establecer el ancho, estilo y color del borde de un elemento.

Propiedad border

La propiedad border es un atajo para definir tres propiedades en una sola declaración:

• border-width: El grosor del borde.
• border-style: El estilo del borde (puede ser sólido, discontinuo, etc.).
• border-color: El color del borde.

Ejemplo Básico:

div {
    border: 2px solid #000;
}
        

En este ejemplo, se establece un borde de 2 píxeles de grosor, de tipo sólido y de color negro (#000) alrededor de un <div>.

Propiedades de Bordes

Además de la propiedad abreviada border, puedes establecer cada propiedad por separado:

Establecer el Ancho del Borde:

div {
    border-width: 5px;
}
        

En este ejemplo, el borde tiene un grosor de 5 píxeles. El valor predeterminado de border-width es medium.

Establecer el Estilo del Borde:

• solid: Borde sólido.
• dotted: Borde de puntos.
• dashed: Borde de rayas.
• double: Dos líneas continuas.
• groove: Borde con efecto de relieve.
• ridge: Borde con efecto de cresta.
• inset: Borde con efecto de hundimiento.
• outset: Borde con efecto de elevación.
• none: Sin borde.

Ejemplo de Estilo de Borde:

div {
    border-style: dashed;
}
        

En este ejemplo, el borde de 5 píxeles será de estilo "rayado".

Establecer el Color del Borde:

div {
    border-color: red;
}
        

En este caso, el borde será de color rojo.

Propiedades Específicas para Cada Lado

Si deseas controlar el borde de cada lado por separado, puedes usar las siguientes propiedades:

• border-top: Establece el borde superior.
• border-right: Establece el borde derecho.
• border-bottom: Establece el borde inferior.
• border-left: Establece el borde izquierdo.

Ejemplo de Bordes Específicos:

div {
    border-top: 3px solid blue;
    border-bottom: 3px dashed green;
}
        

En este ejemplo, el borde superior es sólido de color azul y el borde inferior es una línea discontinua verde.

Redondear Bordes

Para crear bordes con esquinas redondeadas, puedes usar la propiedad border-radius.

Ejemplo de Bordes Redondeados:

div {
    border: 2px solid #000;
    border-radius: 10px;
}
        

Este código crea un borde con esquinas redondeadas de 10 píxeles alrededor de un <div>.

Propiedad outline

La propiedad outline es similar a border, pero no ocupa espacio en el diseño. A menudo se utiliza para resaltar un elemento cuando se enfoca o para agregar un contorno visual adicional.

Ejemplo de Contorno:

div {
    outline: 2px solid red;
}
        

Este código crea un contorno rojo alrededor del <div>, sin afectar su tamaño o la disposición del contenido.

Combinando Propiedades de Bordes

Puedes combinar las propiedades de borde en una sola declaración, de modo similar a como se hace con la propiedad background.

Ejemplo Combinado:

div {
    border: 2px dashed green;
    border-radius: 15px;
}
        

Este código crea un borde de 2 píxeles de grosor, con estilo discontínuo (dashed), de color verde, y con las esquinas redondeadas a 15 píxeles.

Conclusión

Los bordes en CSS permiten una gran flexibilidad a la hora de darle forma y estilo a los elementos de una página web. Con la combinación de propiedades como border, border-radius, y outline, puedes crear efectos visuales atractivos y funcionales. Experimenta con diferentes combinaciones para mejorar la apariencia de tu sitio web.