La Propiedad BORDER-TOP-WIDTH

La propiedad border-top-width en CSS se utiliza para establecer el grosor del borde superior de un elemento HTML.

 

La propiedad border-top-width en CSS se utiliza para establecer el grosor del borde superior de un elemento HTML. Es una de las propiedades individuales que componen la propiedad abreviada border-top.

Es importante recordar que border-top-width por sí sola no hará que aparezca un borde. Necesitas definir también un border-top-style y un border-top-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-top-width es la siguiente:

CSS
 
selector {
  border-top-width: <ancho>;
}

Donde <ancho> es el valor que define el grosor del borde superior.

Valores de la Propiedad border-top-width

Puedes especificar el ancho del borde superior 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-top-width: 2px; /* Un borde superior de 2 píxeles de grosor */
}

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

.borde-ancho-rem {
  border-top-width: 0.3rem; /* 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-top-width: thin;
}

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

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

Relación con Otras Propiedades de Borde Superior

Como se mencionó anteriormente, border-top-width trabaja en conjunto con otras propiedades para definir completamente el borde superior:

  • border-top-style: Define la apariencia del borde (por ejemplo, solid, dashed, dotted). Si no se establece un estilo, el ancho no será visible.
  • border-top-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-top para establecer el ancho, el estilo y el color en una sola línea:

CSS
 
selector {
  border-top: <border-width> <border-style> <color>;
}

Ejemplos Prácticos

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

Ejemplo 1: Borde superior sólido negro de 3 píxeles

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

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

</body>
</html>

Ejemplo 2: Borde superior punteado azul de grosor delgado

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-top-style: dotted;
    border-top-color: blue;
    border-top-width: thin;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde superior punteado delgado.</div>

</body>
</html>

Ejemplo 3: Usando la propiedad abreviada border-top con diferentes anchos

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento-grueso {
    width: 150px;
    height: 120px;
    background-color: #d0d0d0;
    margin: 20px;
    border-top: thick solid green; /* Borde superior grueso y sólido */
  }

  .elemento-fino {
    width: 150px;
    height: 120px;
    background-color: #d0d0d0;
    margin: 20px;
    border-top: 1px dashed red; /* Borde superior de 1 píxel y de guiones */
  }
</style>
</head>
<body>

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

</body>
</html>

Ejemplo 4: Borde superior con ancho en ems

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    font-size: 16px; /* Tamaño de fuente base para el contenedor */
  }
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-top-style: solid;
    border-top-color: purple;
    border-top-width: 0.5em; /* El ancho será la mitad del tamaño de la fuente del contenedor (8px) */
  }
</style>
</head>
<body>
  <div class="contenedor">
    <div class="elemento">Este elemento tiene un borde superior con ancho en ems.</div>
  </div>
</body>
</html>

Casos de Uso Comunes

  • Crear líneas divisorias horizontales de diferentes grosores para separar secciones de contenido.
  • Resaltar la parte superior de elementos como encabezados o menús con un borde más grueso.
  • Indicar visualmente la importancia o el estado de un elemento mediante el grosor de su borde superior.
  • Ajustar el impacto visual de los bordes superiores según el diseño general de la página.

Compatibilidad del Navegador

La propiedad border-top-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-top-style y border-top-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. Las unidades relativas como em y rem pueden ser útiles para diseños más flexibles.

Conclusión

La propiedad border-top-width te permite controlar el grosor del borde superior de tus elementos HTML. Al combinarla con otras propiedades de borde, puedes crear una variedad de efectos visuales para mejorar la presentación y la estructura de tu sitio web. Recuerda siempre establecer un estilo y un color para que el ancho del borde sea visible.