Border Style Property
Last updated: 2026-09-13
border-style Border Style Property
border-style defines the appearance of the border line, such as solid, dashed, or dotted. It is the key to whether a border is visible at all — even with border-width and border-color set, a border stays invisible when border-style is none. CSS provides 10 different line styles to choose from.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset{1,4};⚙️ Values
| Value | Type | Description |
|---|---|---|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | Keyword | The 10 border line styles |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-style | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： solid is the most commonly used style; dashed and dotted are often used for temporary markers or draft states.
Warning： none and hidden both render no border, but hidden also suppresses neighboring borders in a table with border-collapse: collapse, so their behavior differs.
❓ FAQ
QWhy do groove, ridge, inset, and outset look flat?
AThese four 3D styles rely on the light/dark contrast of the border color to create depth, so the effect is barely visible when the color contrast is low or the border is thin. They are rarely used in modern flat UI; prefer solid combined with box-shadow for a subtle layered look.
QWhat is the difference between border-style: none and hidden?
ABoth render no border. The difference matters in tables: with border-collapse: collapse, hidden forcefully suppresses neighboring borders (highest priority), while none has lower priority and a neighboring cell's border can still show. On regular elements the two behave identically.
QWhat border line styles does CSS provide, and when should I use each?
ACSS offers 10 styles: none, hidden, solid, dashed, dotted, double, groove, ridge, inset, and outset. solid is the most common; dashed and dotted work well as separators; double adds emphasis; and the four 3D styles are rarely used in flat design. Pick based on the visual weight you need.
QHow do I create mixed styles like a dashed border on one side only?
Aborder-style accepts 1 to 4 values assigned to the top, right, bottom, and left edges, so border-style: solid dashed; gives solid top/bottom and dashed left/right. You can also combine per-side properties, e.g. border-top-style: dashed; border-bottom-style: solid; for a single dashed edge.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
