CSS border-top Property

What You’ll Learn

The border-top property sets the width, style, and color of the physical top border in one shorthand rule.

Definition and Usage

The border-top CSS property is a physical shorthand that sets the border on the top side of an element. It combines border-top-width, border-top-style, and border-top-color in one declaration.

Unlike logical properties such as border-block-start, border-top always targets the physical top edge — even in vertical writing modes. That makes it straightforward for section headers, card accent bars, and horizontal dividers.

📝 Syntax

border-top accepts border width, style, and color like other border shorthands:

selector {
  border-top: width style color;
}

Basic Example

.top-border {
  border-top: 5px solid blue;
}

Syntax Rules

• Sets width, style, and color for the top border side only.
• Omitted components use initial values: medium, none, currentcolor.
• Any valid border width, style, and color values are accepted.
• Always affects the physical top side, regardless of direction or writing-mode.
• Use longhands when you need to set only width, style, or color on the top side.

Default Value

The default value of border-top is medium none currentcolor. No visible border appears until you set a non-none style and a width greater than zero.

💎 Property Values

Common Value Types

Top Border and Writing Modes

border-top always draws on the physical top edge. Vertical writing modes do not move the border — compare with border-block-start when block-start should follow the writing mode.

border-top vs related properties

Examples Gallery

Try border-top with solid blue borders, card accents, vertical writing comparison, and dashed styles.

<style>
  .top-border {
    border-top: 5px solid blue;
    padding: 10px;
  }
</style>

<h1>Div with Top Border</h1>
<div class="top-border">
  This div has a blue top border that is 5 pixels thick.
</div>

.card {
  max-width: 16rem;
  padding: 0.75rem 1rem;
  border-top: 4px solid #2563eb;
  background: #eff6ff;
  color: #334155;
}

<style>
  .vertical-box {
    writing-mode: vertical-rl;
    display: inline-block;
    padding: 0.75rem 1rem;
    border-top: 4px solid #059669;
    background: #ecfdf5;
  }
</style>

<div class="vertical-box">
  Top border stays on the physical top
</div>

.note {
  padding: 0.75rem 1rem;
  border-top: 3px dashed #7c3aed;
  background: #faf5ff;
}

💡 Best Practices