CSS border-top-width Property

Definition and Usage

The border-top-width property sets the thickness of an element’s top border. Use a keyword (thin, medium, thick) or a length such as 2px or 0.25rem.

It applies to all elements, including ::first-letter, and it is not inherited. The initial value is medium. A width does nothing useful until border-top-style is a visible style such as solid. For width, style, and color together, prefer the border-top shorthand.

CSS Syntax

Lengths must be non-negative. Negative values are invalid and ignored.

Property Values

How to Use border-top-width

Pick a thickness, then make sure style (and usually color) are set so the line can paint.

1. Choose the element that needs a top edge line.
2. Set border-top-width to a keyword or length.
3. Set border-top-style to something visible, such as solid.
4. Optionally set border-top-color, or use border-top for all three at once.

Live Preview

The box already has a solid blue top border. Change only the width and watch the line grow or shrink.

CSS Examples

Each snippet focuses on border-top-width. Style and color are only there so the line can show. Use Try It Yourself for a live editor.

<style>
  p {
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: black;
  }
</style>

<p>Top border is 5px thick.</p>

<style>
  h2 {
    border-top-width: thick;
    border-top-style: solid;
    border-top-color: #2563eb;
  }
</style>

<h2>Thick top border</h2>

<style>
  div {
    border-top-style: solid;
    border-top-color: #2563eb;
  }

  .w1 {
    border-top-width: 1px;
  }

  .w4 {
    border-top-width: 4px;
  }

  .w8 {
    border-top-width: 8px;
  }
</style>

<div class="w1">1px</div>
<div class="w4">4px</div>
<div class="w8">8px</div>

Key Takeaways