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:

The border-style Values
Why border-style Is Required
Per-Side Styles
double, groove, ridge, inset, outset in Practice
Style Combined with none and hidden

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.

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.

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.

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>

🔒

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