Propiedad CSS border-top-width

La propiedad CSS border-top-width define el ancho (grosor) del borde superior de un elemento. Controla únicamente el borde superior, por lo que resulta útil cuando se desea que ese borde sea más grueso o más delgado que los otros tres lados — por ejemplo, una línea de acento gruesa sobre una tarjeta o sección.

Puedes establecer el ancho del borde superior de dos maneras:

Directamente, con la propiedad larga border-top-width, cuando solo el borde superior es diferente.
Como parte de una abreviatura, usando border o border-width, cuando deseas establecer varios lados a la vez.

border-top-width solo tiene efecto visible una vez que se ha establecido un estilo de borde. Por defecto, el estilo de borde es none, lo que significa que un borde con cualquier ancho no renderiza nada. Por lo tanto, primero debes declarar un estilo con border-style o border-top-style, y ese estilo no debe ser none ni hidden.

/* Without a style the width is ignored — nothing shows */
.box {
  border-top-width: thick; /* has no effect on its own */
}

/* Add a style and the width becomes visible */
.box {
  border-top-style: solid;
  border-top-width: thick;
}

Las propiedades largas hermanas border-right-width, border-bottom-width y border-left-width funcionan del mismo modo para los otros bordes.

Información

La especificación no define el grosor exacto de cada palabra clave. Sin embargo, siempre mantienen el siguiente orden: thin ≤ medium ≤ thick.

Información

La especificación no define cómo se unen en las esquinas los bordes de distintos estilos y anchos.

Valor inicial	medium
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No
Animable	Sí. El ancho del borde es animable.
Versión	CSS1
Sintaxis DOM	object.style.borderTopWidth = "5px";

Sintaxis

Sintaxis de la propiedad CSS border-top-width

border-top-width: medium | thin | thick | length | initial | inherit;

Ejemplo de la propiedad border-top-width:

Ejemplo de la propiedad CSS border-top-width con el valor thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        border-style: dotted;
        border-top-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-width example</h2>
    <p>As you can see the width of the top border is set to thick.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

![Propiedad CSS border-top-width](https://api.w3docs.com/uploads/media/default/0001/03/ff5db94a745edc3bcb963c80df1284fa352d4278.png "border-top-width set to thick on a dotted paragraph" =420x)

Ejemplo de la propiedad border-top-width con todos los valores:

Ejemplo de la propiedad CSS border-top-width con los valores medium, thin, thick, initial e inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-top-width example classes */
      .b1 {
        border-top-width: medium;
      }
      .b2 {
        border-top-width: thin;
      }
      .b3 {
        border-top-width: thick;
      }
      .b4 {
        border-top-width: 10px;
      }
      .b5 {
        border-top-width: initial;
      }
      .b6 {
        border-top-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-top-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
medium	Define un borde superior mediano. Es el valor predeterminado de esta propiedad.	Pruébalo »
thin	Define un borde superior delgado. El agente de usuario determina el ancho exacto.	Pruébalo »
thick	Define un borde superior grueso. El agente de usuario determina el ancho exacto.	Pruébalo »
length	Define el grosor del borde superior (p. ej., 10px, 5em, 8pt). No se admiten valores en porcentaje.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Palabras clave frente a valores de longitud

Puedes expresar el ancho con una de las tres palabras clave (thin, medium, thick) o con una longitud explícita. Las palabras clave son prácticas pero imprecisas: la especificación CSS no fija un tamaño exacto en píxeles para ellas, solo el orden thin ≤ medium ≤ thick. La mayoría de los navegadores las renderizan como aproximadamente 1px, 3px y 5px, pero no deberías confiar en eso.

Usa una longitud explícita (1px, 0.25em, 3pt) siempre que necesites un grosor predecible y consistente entre navegadores. Ten en cuenta que los porcentajes no están permitidos para los anchos de borde, y las longitudes negativas no son válidas.

Aspectos a tener en cuenta

Sin borde visible sin un estilo. El error más común es establecer solo el ancho y olvidar border-top-style. Con el estilo predeterminado none, el borde simplemente no se renderiza.
initial frente a inherit. initial restablece el ancho a su valor predeterminado especificado (medium), mientras que inherit copia el ancho calculado del elemento padre.
El ancho afecta al diseño. Un borde más ancho aumenta el tamaño renderizado del elemento, a menos que box-sizing esté configurado en border-box, lo que mantiene fijo el ancho/alto declarado y absorbe el borde dentro de él.
Esquinas. La especificación no define cómo se unen en una esquina los bordes de distintos anchos o estilos, por lo que un borde superior grueso que se encuentre con un borde lateral delgado puede verse ligeramente diferente entre navegadores.

Práctica

¿Cuáles son valores válidos para la propiedad border-top-width en CSS?