CSS border-top-width Property

The border-top-width property is used to define the width of an element’s top border.

The width of the top border, as well as all the other border sides, can be defined with the border or border-width shorthand properties.

To apply border-top-width, you must first define a border style using either border-style or border-top-style. The property only takes effect when the border style is not none or hidden.

Info

The specification doesn't define the exact thickness of each keyword. However, they always have the following order: thin ≤ medium ≤ thick.

Info

The specification does not define how borders of different styles and width connect in the corners.

Initial Value	medium
Applies to	All elements. It also applies to ::first-letter.
Inherited	No
Animatable	Yes. The width of the border is animatable.
Version	CSS1
DOM Syntax	object.style.borderTopWidth = "5px";

Syntax

Syntax of CSS border-top-width Property

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

Example of the border-top-width property:

Example of CSS border-top-width Property with thick value

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

Result

Example of the border-top-width property with all the values:

Example of CSS border-top-width Property with medium, thin, thick, initial and inherit values

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