CSS border-top-width Property

What You’ll Learn

The border-top-width property sets how thick the top border is on an element. It is useful when you want precise control over divider weight on the top edge.

Definition and Usage

The border-top-width CSS property allows you to specify the thickness of the top border of an element. This property is part of the border longhand family and is used to control the width of the border along the top edge.

By adjusting this property, you can enhance visual separation between elements and create more defined layouts with subtle 1px dividers or prominent accent lines.

📝 Syntax

The syntax for border-top-width is straightforward. It accepts keyword values or length units.

selector {
  border-top-width: <length> | thin | medium | thick;
}

Basic Example

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

The value can be a keyword such as thin or a length such as 5px, 0.25em, or 1rem.

Syntax Rules

• The initial value is medium, typically around 3 to 4 pixels.
• Keywords: thin, medium, and thick.
• Length values use units like px, em, or rem.
• Pair with border-top-style and border-top-color for full control.
• Use border-top shorthand when setting width, style, and color together.

Default Value

The default value of border-top-width is medium, which typically corresponds to a width of around 3 to 4 pixels depending on the browser’s default settings.

💎 Property Values

The border-top-width property accepts keyword values and length units.

Physical Top Edge

border-top-width always sets the thickness of the visual top border, even when writing mode changes. For writing-mode-aware layouts, consider border-block-start-width instead.

border-top-width vs border-block-start-width

Examples Gallery

Try border-top-width with keyword sizes, pixel lengths, width comparisons, and top-edge overrides.

<style>
  p.thin-border {
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: black;
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  p.thick-border {
    border-top-width: thick;
    border-top-style: solid;
    border-top-color: black;
    padding-top: 0.75rem;
  }
</style>

<p class="thin-border">This paragraph has a thin top border.</p>
<p class="thick-border">This paragraph has a thick top border.</p>

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

<p>
  This paragraph has a top border width of 5 pixels.
</p>

.w-1 {
  border-top: 1px solid #64748b;
}
.w-4 {
  border-top-width: 4px;
  border-top-style: solid;
  border-top-color: #2563eb;
}
.w-8 {
  border-top: 8px solid #dc2626;
}

.tab-card {
  border: 1px solid #cbd5e1;
  border-top-width: 4px;
  border-top-color: #2563eb;
  padding: 1rem;
  border-radius: 0.5rem;
}

💡 Best Practices