CSS border-top Property

Definition and Usage

The border-top property is a shorthand that sets border-top-width, border-top-style, and border-top-color on the physical top edge only.

A border appears only when the style is not none. Width defaults to medium and color to currentColor when omitted. For every side at once, use border. For a logical start edge that follows writing mode, use border-block-start.

CSS Syntax

Write one to three values, in any order. The usual order is width, style, then color: border-top: 3px solid black;.

Property Values

How to Use border-top

Pick a style first so the top line is visible, then set width and color as needed.

1. Choose the element that needs a line on its physical top edge.
2. Set a style such as solid, dashed, or dotted. Without a style, nothing draws.
3. Add a width and color when you want them. Omit them to use medium and currentColor.
4. Leave the other sides alone — border-top does not change right, bottom, or left.

Live Preview

Change the border-top shorthand and watch only the top edge update.

CSS Examples

Each snippet focuses on the border-top shorthand. Use Try It Yourself for a live editor.

<style>
  div {
    border-top: 3px solid #0f172a;
    padding: 12px;
  }
</style>

<div>Solid top border</div>

<style>
  div {
    border-top: 3px dashed #2563eb;
    padding: 12px;
  }
</style>

<div>Dashed top border</div>

<style>
  div {
    border-top: 6px double #0f766e;
    padding: 12px;
  }
</style>

<div>Double top border</div>

Key Takeaways