CSS border-style Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-style property showing solid dashed and dotted borders on boxes
Definition

Definition and Usage

The border-style property is a shorthand that sets the line style on all four sides of an element’s border. It covers border-top-style, border-right-style, border-bottom-style, and border-left-style.

The initial value is none, so width or color alone will not draw a border. Pick a visible style such as solid, dashed, or dotted. For width, style, and color together, use the border shorthand.

Baseline · Widely available.

Not deprecated and not experimental. Supported across modern browsers and Internet Explorer. Safe to use as a core box-model property.

Syntax

CSS Syntax

syntax.css
border-style: <line-style>{1,4} | initial | inherit;

Use one to four <line-style> keywords. One value styles every side; four values go top, right, bottom, left.

Values

Property Values

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

How to Use border-style

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

  1. Choose the element that should show a border.
  2. Set border-style to a keyword such as solid or dashed. Without this, nothing draws.
  3. Optionally set border-width and border-color, or use the border shorthand.
  4. Use two to four style values only when sides must differ.
PieceRequired?Role
Style keywordYes (to show a line)Default is none, which hides the border
WidthOptionalDefaults to medium when a visible style is set
ColorOptionalDefaults to currentColor
1–4 valuesBy designControls which sides share the same style
Try it

Live Preview

Change border-style on a box that already has width and color. Watch the line pattern update.

Width and color stay fixed. Only the style keyword changes.

Box

border-style: solid

Code

CSS Examples

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

Example 1 — Solid Style

Draw a continuous line on every side.

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

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

How It Works

  1. Set the style. solid is the keyword that draws a continuous line.
  2. Give it thickness. border-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. One value, four sides. A single solid applies to top, right, bottom, and left together.

Example 2 — Dashed Style

Swap the continuous line for short dashes.

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

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

How It Works

  1. Keep width and color. The box still needs a visible stroke setup.
  2. Change only the style. dashed replaces the solid line with gaps.
  3. Color the dashes. Blue applies to every side the same way solid did.
  4. Same shorthand shape. One keyword still paints all four sides.

Example 3 — Different Styles Per Side

Use two values: top and bottom first, then left and right.

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

<div>Top/bottom dashed</div>
Try It Yourself

How It Works

  1. Write two keywords. dashed solid is a two-value shorthand.
  2. First value = top and bottom. Those edges become dashed.
  3. Second value = left and right. Those edges become solid.
  4. Need four different sides? Use four values in clockwise order: top, right, bottom, left.

Edge Cases & Pitfalls

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

none

Default style hides everything

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

table

none vs hidden in collapsed tables

With border-collapse: collapse, none has the lowest priority and hidden the highest. Use hidden when you need to suppress a conflicting cell border.

double

double needs enough width

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

3D

Groove, ridge, inset, and outset depend on color

Those keywords fake a 3D edge from the border color. On a light background with a light color they can look flat. Pair them with a clear color and wider width.

outline

Outline is a different property

outline-style draws outside the border box and does not take layout space. Do not swap it for border-style when you need box-model size.

Compatibility

Browser Support

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

✓ Baseline · Widely available

border-style

Supported in all modern browsers and Internet Explorer (IE 6+). Chrome 4+, Firefox 2+, Safari 3.1+, Edge 12+.

100% Universal support
Google Chrome 4+
Full support
Mozilla Firefox 2+
Full support
Apple Safari 3.1+
Full support
Microsoft Edge 12+
Full support
Opera 15+ (Chromium)
Full support
Samsung Internet 4+
Full support
Internet Explorer 6+
Full support
border-style Widely supported

Bottom line: Safe everywhere for standard line styles. Prefer the shorthand when sides share a style; use side longhands when only one edge must differ. It is not a runtime API.

Remember

Key Takeaways

  • Role: shorthand for the line style on all four border sides.
  • Initial value: none. A visible style is required for a border to appear.
  • 1–4 values: all sides, top/bottom + left/right, three-value, or clockwise four-value.
  • Common picks: solid, dashed, and dotted cover most UI needs.

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

Frequently Asked Questions

It is a shorthand that sets the line style on all four sides of an element's border. One value styles every side; up to four values set top, right, bottom, and left.
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 border and force the used width to 0. In collapsed table borders, none has the lowest priority and hidden has the highest, so hidden can suppress conflicting borders.
One value: all sides. Two: top/bottom, then left/right. Three: top, left/right, bottom. Four: top, right, bottom, left (clockwise).
A visible style uses the default medium width and currentColor if you omit width and color. Setting an explicit width and color makes the result clearer while you learn.
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

Set width, style, and color on the top edge alone.

border-top 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-start-start-radius Property CSS border-top Property