CSS border-top-style Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-top-style property drawing a styled line on the physical top edge
Definition

Definition and Usage

The border-top-style property sets the line style of an element’s physical top border. It does not set width or color. You can also set this style with border-top or border-style.

The initial value is none, so width or color alone will not draw a top border. Pick a visible style such as solid, dashed, or dotted. For a logical start edge that follows writing mode, use border-block-start-style.

Baseline · Widely available.

Not deprecated and not experimental. Corner joining between different border styles is not fully defined by the specification, so mixed styles may look slightly different across browsers.

Syntax

CSS Syntax

syntax.css
border-top-style: <line-style> | initial | inherit;

One keyword only. Valid styles include none, hidden, solid, dashed, dotted, double, groove, ridge, inset, and outset.

Values

Property Values

ValueDescriptionTry it
noneNo top border. Initial value. Used width becomes 0Try it
hiddenAlso hides the top border. Highest priority in collapsed table bordersTry it
solidA continuous top line. Most common styleTry it
dashedA series of short dashes on the top edgeTry it
dottedA series of round dots on the top edgeTry it
doubleTwo parallel top lines. Needs enough width to show bothTry it
groove / ridgeCarved or extruded 3D-looking top edges. Opposites of each otherTry it
inset / outsetEmbedded or embossed look on the top edgeTry it
initialResets to the initial value, noneTry it
inheritTakes the value from the parent elementTry it
Approach

How to Use border-top-style

Pick a visible top style first, then add width and color when you want them explicit.

  1. Choose the element that needs a line on its physical top edge.
  2. Set border-top-style to a keyword such as solid or dashed. Without this, nothing draws.
  3. Optionally set border-top-width and border-top-color, or use border-top.
  4. Leave the other sides alone — this property never styles right, bottom, or left.
PieceRequired?Role
Style keywordYes (to show a line)Default is none, which hides the top border
WidthOptionalDefaults to medium when a visible style is set
ColorOptionalDefaults to currentColor
Top edge onlyBy designOther sides keep whatever styles they already have
Try it

Live Preview

Width and color stay fixed. Change only border-top-style and watch the top edge update.

The top border is already 3px wide. Only the style keyword changes.

Top edge

border-top-style: solid

Code

CSS Examples

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

Example 1 — Solid Top Style

Draw a continuous line on the top edge only.

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

<div>Solid top border</div>
Try It Yourself

How It Works

  1. Set the style. solid is the keyword that draws a continuous top line.
  2. Give it thickness. border-top-width: 3px makes the line easy to see.
  3. Set the color. Dark slate paints the stroke. Without a style, width and color alone would still look empty.
  4. Top only. Right, bottom, and left keep their previous borders (or none).

Example 2 — Dashed Top Style

Swap the continuous top line for short dashes.

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

<div>Dashed top border</div>
Try It Yourself

How It Works

  1. Keep width and color. The top edge still needs a visible stroke setup.
  2. Change only the style. dashed replaces the solid line with gaps.
  3. Color the dashes. Blue applies only to the top edge.
  4. Same longhand shape. One keyword still paints the top side alone.

Example 3 — Double Top Style

Draw two parallel lines on the top. Give the border enough width so both show.

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

<div>Double top border</div>
Try It Yourself

How It Works

  1. Choose double. The browser draws two lines with a gap between them.
  2. Give it room. 6px is wide enough for both lines and the space between.
  3. Set the color. Teal fills both top lines.
  4. Still top-only. The longhand applies the effect to the physical top edge alone.

Edge Cases & Pitfalls

If the top border disappears or looks wrong, check these first.

none

Default style hides the top edge

The initial value is none. Setting only border-top-width or border-top-color will not draw a line until style is visible.

shorthand

border-top can overwrite your style

A later border-top shorthand resets omitted parts, including style (back to none). Set the longhand after the shorthand if both are needed.

logical

Physical top is not always block-start

In vertical writing modes, use border-block-start-style when the styled edge should follow the logical start side instead of the screen top.

double

double needs enough width

Two lines share the total top width. A thin width can make double look like a single line. Try 6px or more while learning.

corners

Mixed corner styles are undefined

The specification does not define how borders of different styles join at corners. Keep adjacent sides consistent when the join must look identical everywhere.

Compatibility

Browser Support

border-top-style is a browser CSS property for the box model. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

border-top-style

Supported in all modern browsers and Internet Explorer. The side style longhand has been part of CSS since the earliest versions.

100% Universal support
Google Chrome All versions
Full support
Mozilla Firefox All versions
Full support
Apple Safari All versions
Full support
Microsoft Edge All versions
Full support
Opera All versions
Full support
Samsung Internet All versions
Full support
Internet Explorer All versions
Full support
border-top-style Widely supported

Bottom line: Safe everywhere for standard top-edge line styles. Prefer the longhand when only the top style should change. It is not a runtime API.

Remember

Key Takeaways

  • Role: set the line style of the physical top border only.
  • Initial value: none. A visible style is required for a top border to appear.
  • Common picks: solid, dashed, and dotted cover most top dividers.
  • Shorthands: border-top and border-style can set the same style.

One line: set a top style keyword first — without it, the top border stays invisible.

Frequently Asked Questions

It sets the line style of the border on the physical top edge only. It does not set width or color.
The initial style is none, so nothing draws until you set a visible style such as solid or dashed. Width and color alone are not enough.
Both hide the top border and force the used width to 0. In collapsed table borders, none has the lowest priority and hidden has the highest.
border-top-style always styles the physical top edge. border-block-start-style follows writing-mode, so in vertical text it may map to a side instead of the top.
Yes. border-top and border-style can set the top style. Use border-top-style when you want to change only the top edge style.
It is Baseline Widely available and works in all modern browsers and Internet Explorer. It is a browser CSS property, not a Node.js feature.

Next: border-top-width

Control how thick the physical top border is.

border-top-width tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS border-top-right-radius Property CSS border-top-width Property