The border-top-style property defines the line style of the top border on an element. It is useful when you want the top edge styled differently from the other sides.
01
Top Style
Physical top edge.
02
solid
Continuous line.
03
dashed / dotted
Soft dividers.
04
3D Styles
groove, ridge, inset.
05
none Default
No border by default.
06
Longhand
Part of border-top.
Fundamentals
Definition and Usage
The border-top-style CSS property specifies the style of the top border of an element. This property allows you to control the appearance of the top edge, enhancing design and visual hierarchy on your web pages.
By choosing different border styles such as solid, dashed, or dotted, you can create a variety of effects for section dividers, card accent bars, headers, and horizontal highlights.
💡
Beginner Tip
A border only appears when border-top-style is not none. Pair it with border-top-width and border-top-color, or use border-top: 2px solid #000; as shorthand.
Foundation
📝 Syntax
The syntax for border-top-style is straightforward:
The style value refers to the border line type, such as solid, dashed, or dotted.
Syntax Rules
The initial value is none, which hides the top border.
Common values include solid, dashed, and dotted.
3D-style keywords include groove, ridge, inset, and outset.
Pair with width and color longhands, or use the border-top shorthand.
Related longhands: border-top-width and border-top-color.
Cheat Sheet
⚡ Quick Reference
Question
Answer
Initial value
none
Applies to
Top border style only
Inherited
No
Animatable
No
Common use
Section dividers, card accent bars, header lines
Defaults
Default Value
The default value of border-top-style is none, meaning no top border is displayed until you choose a visible style.
Reference
💎 Property Values
The border-top-style property accepts standard CSS border style keywords.
Value
Description
none
No border is displayed
solid
A single solid line
dashed
A series of dashed lines
dotted
A series of dotted lines
double
Two solid lines with space between them
groove
A 3D grooved border that looks carved in
ridge
A 3D ridged border that looks raised out
inset
A 3D inset border that looks embedded
outset
A 3D outset border that looks raised
hidden
Same as none, but can still affect table layout
previewsolid
previewdotted
previewdashed
previewdouble
previewgroove
previewridge
previewinset
previewoutset
Scope
Top Border Style and Writing Modes
border-top-style always styles the physical top side. Vertical writing modes do not move the border — compare with border-block-start-style when building writing-mode-aware layouts.
Horizontal (writing-mode: horizontal-tb)
Dashed top border on the top edge
topleftrightbottom
Vertical (writing-mode: vertical-rl)
Top border style still on the physical top
topleftrightbottom
Compare
border-top-style vs related properties
Property
Targets
Best for
border-top-style
Physical top border style
Section dividers, card accent bars, and horizontal highlights
dashed breaks the top border into short segments — a common pattern for separating content sections.
Example 4 — border-top-style in Vertical Writing
In vertical writing, border-top-style stays on the physical top — unlike border-block-start-style.
border-top-style-vertical.html
<style>.vertical-box{writing-mode:vertical-rl;display:inline-block;border-top-style:solid;border-top-width:4px;border-top-color:#059669;padding:0.75rem 1rem;background:#ecfdf5;}</style><divclass="vertical-box">
Top border style stays on the physical top
</div>
Vertical writing changes text flow but not the physical top edge. For a block-start accent that follows the writing mode, use border-block-start-style instead.
🧠 How border-top-style Works
1
You choose a line style
Set solid, dashed, dotted, or another border style keyword.
Style rule
2
You add width and color
Pair the style with border-top-width and border-top-color.
Border setup
3
The browser draws the top edge
Only the physical top border uses that line style. Right, bottom, and left sides stay unchanged.
Top edge
=
⋯
Styled top accent
Your element gets a clear visual separator on the physical top edge.
Compatibility
Universal Browser Support
The border-top-style property is supported in all major browsers, including Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer. It is one of the most reliable CSS border properties.
✓ Baseline · All browsers
Reliable top border styles on every platform
Chrome, Firefox, Safari, Edge, and Opera all support border-top-style consistently.
100%Universal support
Google Chrome69+ · Desktop & Mobile
Full support
Mozilla Firefox66+ · Desktop & Mobile
Full support
Apple Safari12.1+ · macOS & iOS
Full support
Microsoft Edge79+ · Chromium
Full support
Opera56+ · Modern versions
Full support
border-top-style property100% supported
Bottom line: Use border-top-style freely in any project. It works consistently across all browsers.
Wrap Up
Conclusion
The border-top-style property provides a variety of options for styling the top border of an element, from simple lines to more complex effects like double and 3D styles.
By experimenting with different style keywords, you can enhance the visual appeal and user experience of your website with section dividers, card accent bars, and decorative top accents.
Use solid for clear section dividers and top accent lines
Try dashed or dotted for softer horizontal dividers
Use border-block-start-style when the accent must follow vertical writing modes
Pair style with width and color longhands for predictable results
Use the border-top shorthand when setting all three parts
Give double enough width (usually 3px or more) to show two lines
❌ Don’t
Leave the value at none and expect a visible border
Expect border-top-style to move to the side in vertical writing modes
Use heavy 3D styles everywhere in modern flat UI
Mix physical and logical style properties without a clear reason
Forget width when using thin styles like dotted or dashed
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about border-top-style
Use these points when styling the physical top edge.
5
Core concepts
⋯01
Top Style
Physical top edge.
Purpose
—02
none Default
Hidden by default.
Default
📝03
solid / dashed
Most common styles.
Values
⚙️04
Needs Width
Pair with longhands.
Setup
🔄05
One Edge Only
Other sides unchanged.
Scope
❓ Frequently Asked Questions
The border-top-style property sets the line style of the border on the physical top side of an element only.
The initial value is none, which means no top border is displayed until you set a visible style such as solid or dashed.
If the value is none, no border appears. You also need border-top-width greater than zero and usually a color, or use the border-top shorthand.
border-top-style always styles the physical top edge. border-block-start-style follows writing mode, so in vertical writing it may appear on the side instead of the top.
solid, dashed, and dotted are the most common for section dividers and top accent lines. double, groove, ridge, inset, and outset create stronger visual effects.
