Propiedad border-top-width de CSS

La propiedad border-top-width se utiliza para definir el ancho del borde superior de un elemento.

El ancho del borde superior, así como todos los demás lados del borde, se pueden definir con las propiedades abreviadas border o border-width.

Para aplicar border-top-width, primero debes definir un estilo de borde utilizando border-style o border-top-style. La propiedad solo surte efecto cuando el estilo del borde no es none ni hidden.

INFO

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

INFO

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

Valor inicial	medium
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredable	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

css

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

html

<!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>

Try it Yourself »

Resultado

CSS border-top-width Property

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

html

<!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>

Try it Yourself »

Valores

Valor	Descripción	Probar
medium	Define un borde superior de grosor medio. Es el valor predeterminado de esta propiedad.	Probar »
thin	Define un borde superior fino. Depende del agente de usuario determinar el ancho exacto.	Probar »
thick	Define un borde superior grueso. Depende del agente de usuario determinar el ancho exacto.	Probar »
length	Define el grosor del borde superior (por ejemplo, 10px, 5em, 8pt). No se admiten valores en porcentaje.	Probar »
initial	Establece la propiedad en su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

Propiedad border-top-width de CSS ​

Sintaxis ​

Ejemplo de la propiedad border-top-width: ​

Resultado ​

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

Valores ​