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

CSS version: CSS 2.1
Value: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4} | inherit
Initial: none (individual properties)
Applies to: all elements
Inherited: no
Few points to note:

  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>
refresh

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>
refresh

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>
refresh

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>
refresh

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>
refresh

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>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments