La Propiedad BORDER-WIDTH

La propiedad border-width en CSS se utiliza para establecer el grosor de los cuatro bordes (superior, derecho, inferior e izquierdo) de un elemento HTML.

La propiedad border-width en CSS se utiliza para establecer el grosor de los cuatro bordes (superior, derecho, inferior e izquierdo) de un elemento HTML. Es una propiedad fundamental para definir el tamaño visual de los bordes.

Es importante recordar que border-width por sí sola no hará que aparezca un borde. Necesitas definir también un border-style y un border-color (o un color que no sea el predeterminado transparente) para que el ancho del borde sea visible.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-width es la siguiente:

CSS 

selector {
  border-width: <ancho>;
}

Donde <ancho> puede ser un valor único o hasta cuatro valores, dependiendo de si quieres aplicar el mismo grosor a todos los lados o grosores diferentes.

Valores de la Propiedad `border-width`

Puedes especificar el ancho del borde utilizando los siguientes tipos de valores:

Valores de longitud: Se especifican utilizando unidades de medida como píxeles (px), ems (em), rems (rem), viewport width (vw), viewport height (vh), etc.

CSS 

.borde-ancho-px {
  border-width: 5px; /* Todos los bordes tendrán 5 píxeles de grosor */
}

.borde-ancho-em {
  border-width: 0.2em; /* El grosor dependerá del tamaño de la fuente del elemento */
}

.borde-ancho-rem {
  border-width: 0.5rem; /* El grosor dependerá del tamaño de la fuente del elemento raíz (html) */
}

Palabras clave: CSS proporciona tres palabras clave predefinidas para especificar el grosor del borde:
- thin: Un borde delgado. El grosor exacto varía según el navegador.
- medium: Un borde de grosor medio. Es el valor predeterminado si no se especifica un ancho.
- thick: Un borde grueso. El grosor exacto varía según el navegador.
CSS
```
.borde-ancho-delgado {
  border-width: thin;
}

.borde-ancho-medio {
  border-width: medium;
}

.borde-ancho-grueso {
  border-width: thick;
}
```

Aplicando Diferentes Anchos a Cada Lado

La propiedad border-width puede aceptar de uno a cuatro valores, que se aplican a los lados del borde de la siguiente manera:

Un Valor: Se aplica el mismo ancho a los cuatro lados (top, right, bottom, left).

CSS 

.borde-uniforme {
  border-width: 3px; /* Todos los bordes tendrán un grosor de 3 píxeles */
}

Dos Valores: El primer valor se aplica a los bordes superior e inferior, y el segundo valor se aplica a los bordes izquierdo y derecho.

CSS 

.borde-top-bottom-left-right {
  border-width: 5px 10px; /* Borde superior e inferior: 5px; Borde izquierdo y derecho: 10px */
}

Tres Valores: El primer valor se aplica al borde superior, el segundo a los bordes izquierdo y derecho, y el tercero al borde inferior.

CSS 

.borde-top-left-right-bottom {
  border-width: 2px 8px 4px; /* Borde superior: 2px; Borde izquierdo y derecho: 8px; Borde inferior: 4px */
}

Cuatro Valores: Los valores se aplican a los bordes en el siguiente orden: superior, derecho, inferior, izquierdo (en sentido horario).

CSS 

.borde-individual {
  border-width: 1px 6px 3px 9px; /* Borde superior: 1px; Borde derecho: 6px; Borde inferior: 3px; Borde izquierdo: 9px */
}

Propiedades Individuales para Cada Lado

Para un control más específico sobre el ancho de cada borde, también puedes utilizar las siguientes propiedades individuales:

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

Estas propiedades funcionan de la misma manera que border-width pero solo afectan al lado especificado.

Relación con Otras Propiedades de Borde

Como se mencionó anteriormente, border-width trabaja en conjunto con otras propiedades para definir completamente los bordes:

border-style: Define la apariencia del borde (por ejemplo, solid, dashed, dotted). Si no se establece un estilo, el ancho no será visible.
border-color: Define el color del borde. Si no se establece un color, se utilizará el color de texto del elemento.

También puedes usar la propiedad abreviada border para establecer el ancho, el estilo y el color de los cuatro bordes en una sola línea, o las propiedades abreviadas específicas para cada lado (border-top, border-right, border-bottom, border-left).

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar border-width en combinación con otras propiedades:

Ejemplo 1: Borde sólido negro de 2 píxeles en todos los lados

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-style: solid; /* Necesitas un estilo para que el ancho sea visible */
    border-color: black; /* Necesitas un color para que el ancho sea visible */
    border-width: 2px;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde de 2 píxeles de grosor.</div>

</body>
</html>

Ejemplo 2: Diferentes anchos en los lados superior/inferior e izquierdo/derecho

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-style: dashed;
    border-color: blue;
    border-width: 4px 8px; /* Superior/inferior: 4px; Izquierda/derecha: 8px */
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene diferentes anchos de borde.</div>

</body>
</html>

Ejemplo 3: Usando la propiedad abreviada border con diferentes anchos

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 150px;
    height: 120px;
    background-color: #d0d0d0;
    margin: 20px;
    border: 1px solid green; /* Borde de 1 píxel de grosor */
  }

  .elemento-grueso {
    width: 150px;
    height: 120px;
    background-color: #d0d0d0;
    margin: 20px;
    border: thick solid red; /* Borde grueso */
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde delgado.</div>
  <div class="elemento-grueso">Este elemento tiene un borde grueso.</div>

</body>
</html>

Casos de Uso Comunes

Crear líneas divisorias de diferentes grosores para separar secciones de contenido.
Resaltar elementos importantes con un borde más grueso.
Ajustar el grosor de los bordes para mejorar la jerarquía visual de los elementos.
Crear efectos visuales específicos utilizando diferentes grosores en cada lado.

Compatibilidad del Navegador

La propiedad border-width es una propiedad CSS fundamental y tiene una excelente compatibilidad con todos los navegadores modernos y versiones anteriores.

Consideraciones

Asegúrate de establecer también border-style y border-color (o un color de texto visible) para que el ancho del borde sea visible.
Experimenta con diferentes unidades de medida y palabras clave para lograr el efecto visual deseado.
Utiliza la notación de múltiples valores para aplicar grosores diferentes a cada lado según tus necesidades de diseño.

Conclusión

La propiedad border-width te permite controlar el grosor de los bordes de tus elementos HTML, lo que es crucial para la presentación visual y la estructura de tu sitio web. Al combinarla con border-style y border-color, puedes crear una amplia variedad de efectos de borde para mejorar la experiencia del usuario y la estética de tu diseño.