← Back to CSS Course | Chapter 2: Colors & Backgrounds | Lesson 17 of 21

CSS Border Style

A border's style is the line pattern itself, independent of how thick it is or what color it is — solid, dashed, dotted, and a handful of 3D-looking variants.

In this page:

  1. The border-style Values
  2. Why border-style Is Required
  3. Per-Side Styles
  4. double, groove, ridge, inset, outset in Practice
  5. Style Combined with none and hidden
Syntax
css 
selector {
  border-style: solid | dashed | dotted | double | none;
}

The border-style Values

border-style accepts solid, dashed, dotted, double, groove, ridge, inset, and outset, plus none and hidden to remove a border entirely. Each keyword produces a genuinely different line pattern, not just a visual tweak — dashed and dotted differ in dash length and spacing, while groove/ridge/inset/outset simulate a 3D bevel using light and dark shading derived from the border color.

Note:
  • Accepted values:
  • none — no border (default)
  • solid — a single line
  • dashed — dashes
  • dotted — dots
  • double — two parallel lines
  • groove | ridge | inset | outset — 3D effects
  • hidden — no border, wins in table conflicts
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: The border-style Values

css 
<style>
.solid { border: 4px solid black; }
.dashed { border: 4px dashed black; }
.dotted { border: 4px dotted black; }
.double { border: 6px double black; }
</style>
<div class="solid">solid</div>
<div class="dashed">dashed</div>
<div class="dotted">dotted</div>
<div class="double">double</div>

Why border-style Is Required

Setting only border-width and border-color has no visible effect — without border-style, the browser has no line pattern to draw, so no border renders at all even though width and color are set. This is the single most common reason a border silently fails to appear.

Example: Why border-style Is Required

css 
<style>
.no-style { border-width: 4px; border-color: red; }
.with-style { border-width: 4px; border-color: red; border-style: solid; }
</style>
<div class="no-style">Invisible: no style</div>
<div class="with-style">Visible: style set</div>

Per-Side Styles

border-top-style, border-right-style, border-bottom-style, and border-left-style let each side use a completely different pattern, useful for effects like a dashed-top divider with solid sides.

Note:
  • Accepted values:
  • none | hidden — no visible border
  • solid — continuous line
  • dashed — dashes
  • dotted — dots
  • double — two lines with a gap
  • groove | ridge | inset | outset — 3D effects
  • border-top-style etc. — each takes one of these values
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Per-Side Styles

css 
<style>
.box {
  border-top-style: dashed;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-width: 3px;
  border-color: black;
}
</style>
<div class="box">Dashed top, solid sides</div>

double, groove, ridge, inset, outset in Practice

double draws two parallel lines with a gap sized from border-width, needing at least 3px to look right. groove and ridge simulate a carved or raised line using the border-color's light/dark variants; inset and outset apply that same 3D shading to the whole border, common on old-style panel UIs.

Note:
  • Accepted values:
  • none — no border (initial value)
  • hidden — no border; wins in table border conflicts
  • solid — one continuous line
  • dashed — a series of dashes
  • dotted — a series of dots
  • double — two parallel lines
  • groove | ridge — carved or raised 3D look
  • inset | outset — sunken or raised 3D look
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: double, groove, ridge, inset, outset in Practice

css 
<style>
.double { border: 6px double #333; }
.groove { border: 6px groove #333; }
.ridge { border: 6px ridge #333; }
</style>
<div class="double">double</div>
<div class="groove">groove</div>
<div class="ridge">ridge</div>

Style Combined with none and hidden

none and hidden both remove the border and its width entirely, but they differ specifically in table border-collapse conflicts: hidden always wins over any other border style on an adjacent cell, while none can be overridden.

Example: Style Combined with none and hidden

css 
<style>
.a { border-style: none; }
.b { border-style: hidden; }
</style>
<div class="a">none</div>
<div class="b">hidden</div>
Live Example
Related Topics

CSS Border Width · CSS Border Color · CSS Border Sides · CSS Border Shorthand

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Setting border-color and border-width but no border-style, so no border appears because the default style is none.
  2. Misspelling a style value such as dotted as doted, which is invalid.
  3. Using groove, ridge or inset with very thin borders, which look almost the same as solid.
Browser Support

Supported in all modern browsers: Chrome, Firefox, Safari, Edge and Opera.

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Borders Next Lesson → CSS Border Width

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.