CSS border-style tutorial and examples

CSS border-style property specify the line style of a box’s border (solid, double, dashed, etc.).

CSS property border-style

1. When four values are specified this is the order:

   border-top-style, border-right-style, border-bottom-style, border-left-style
   

2. When less than four values are specified:

   h1 { border-style: solid }                   /* solid solid solid solid */
   h1 { border-style: solid dashed }             /* solid dashed solid dashed */
   h1 { border-style: solid dashed dotted }      /* solid dashed dotted dashed */
   

3. border-style must be set to something other than none and border-width should be > 0 for border-color to be applicable.

Example – border-style – solid, dotted, dashed

<style type="text/css">
.box {
  width: 100px; height: 100px;
  border-style: solid dotted dashed;
}
</style>
<div class="box">
  Hello world in div
</div>

Example – border-style – double

<style type="text/css">
.box {
  width: 100px; height: 100px;
  border-style: double;
}
</style>
<div class="box">
  Hello world in div
</div>

Example – border-style – groove

<style type="text/css">
.box {
  width: 100px; height: 100px;
  border-style: groove;
}
</style>
<div class="box">
  Hello world in div
</div>

Example – border-style – ridge

<style type="text/css">
.box {
  width: 100px; height: 100px;
  border-style: ridge;
}
</style>
<div class="box">
  Hello world in div
</div>

Example – border-style – inset

<style type="text/css">
.box {
  width: 100px; height: 100px;
  border-style: inset;
}
</style>
<div class="box">
  Hello world in div
</div>

Example – border-style – outset

<style type="text/css">
.box {
  width: 100px; height: 100px;
  border-style: outset;
}
</style>
<div class="box">
  Hello world in div
</div>

Related

• CSS border - define border properties of an element
• CSS border-width - set element border width of four sides
• CSS border-color - define color of four borders
• CSS border radius and round corners examples

Specification

• W3C CSS 2.1 border-style specification