15-Anchura de los Bordes en CSS: Ajusta el Estilo 🔲

---

Anchura de los Bordes en CSS

• 1. Descripción General de border-width
• 2. Aplicación de border-width a Todos los Bordes
• 3. border-width para Bordes Específicos (Top, Right, Bottom, Left)

---

Descripción General de border-width

La propiedad border-width en CSS permite especificar la anchura de los bordes de un elemento. Esta propiedad define el grosor del borde que rodea el contenido, y se puede ajustar de varias maneras para adaptarse a diferentes necesidades de diseño.

Los valores para border-width pueden ser definidos en unidades específicas como px, em, cm, o mediante valores predefinidos como:

• thin - Borde delgado
• medium - Borde de grosor medio
• thick - Borde grueso

Ejemplos Visuales

Borde thin (delgado)

Borde medium (medio)

Borde thick (grueso)

---

Aplicación de border-width a Todos los Bordes

Para aplicar el mismo grosor de borde a todos los lados de un elemento, simplemente se especifica un único valor de border-width. Esto es útil cuando deseas que todos los bordes tengan el mismo grosor.

Ejemplo de código:

/* Borde de 5px para todos los lados */
        div {
            border-width: 5px;
            border-style: solid;
            border-color: #39a039;
        }

---

Ejemplo Visual

Borde de 5px en todos los lados

---

border-width para Bordes Específicos (Top, Right, Bottom, Left)

Es posible especificar diferentes grosores de borde para cada lado del elemento usando propiedades como:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Ejemplo de código:

/* Bordes con grosores diferentes en cada lado */
        div {
            border-top-width: 5px;
            border-right-width: 10px;
            border-bottom-width: 15px;
            border-left-width: 20px;
            border-style: solid;
            border-color: #39a039;
        }

Ejemplo Visual

Bordes con diferentes grosores:
Superior: 5px, Derecho: 10px, Inferior: 15px, Izquierdo: 20px

---

Ir al índice

---