Border en CSS

< Anterior Siguiente >

¿Qué es la propiedad border en CSS?

La propiedad border en CSS se utiliza para definir los bordes de un elemento HTML. Con esta propiedad, puedes establecer el estilo, el ancho y el color del borde de un elemento.

Componentes de border

La propiedad border es un atajo que combina tres propiedades individuales:

1. Border Width

La propiedad border-width define el grosor del borde y puede aceptar valores como thin, medium, thick, o valores específicos en píxeles.

/* Ejemplo de uso */
.example-box {
    border-width: 2px;
}

2. Border Style

La propiedad border-style define el estilo del borde. Los estilos más comunes son:

/* Ejemplo de uso */
.example-box {
    border-style: solid;
}

3. Border Color

La propiedad border-color define el color del borde. Puedes usar nombres de colores, valores hexadecimales, RGB, o HSL.

/* Ejemplo de uso */
.example-box {
    border-color: #3f51b5;
}

4. Uso de border como Atajo

Puedes combinar las tres propiedades en una sola línea utilizando el atajo border:

/* Ejemplo de uso */
.example-box {
    border: 2px solid #3f51b5;
}

Bordes en Cada Lado

Además de la propiedad border que aplica a todos los lados del elemento, puedes definir bordes específicos para cada lado:

/* Ejemplo de uso */
.example-box {
    border-top: 2px solid red;
    border-right: 2px solid green;
    border-bottom: 2px solid blue;
    border-left: 2px solid yellow;
}

Ejemplos Prácticos

Los bordes pueden usarse de muchas maneras para mejorar el diseño visual de una página web. A continuación, se muestran algunos ejemplos prácticos de cómo se pueden aplicar:

/* Ejemplo de un botón con borde */
button {
    border: 2px solid #4CAF50;
    background-color: white;
    color: #4CAF50;
    padding: 10px 20px;
    border-radius: 5px;
}

Consejos para Usar border en CSS