CSS border-style Property

The border-style property sets the style of the border.

It accepts one to four values for top, right, bottom, and left style.

A border-style value is required for any border to display.

Example

#

A dashed border-style.

border-style: dashed
<style>
  .border-dashed {
    padding: 20px;
    border-style: dashed;
  }
</style>

<div class="border-dashed">
  border-style: dashed
</div>

Syntax

border-style: none | hidden | dotted | dashed | solid | double | groove |
              ridge | inset | outset | initial | inherit;

Values

#

Value Description
none Default, no border
hidden Same as none except for table, it conflicts on the resolution
dotted Dotted border
dashed Dashed border
solid Solid border
double Double border
groove 3D groove border
ridge 3D ridge border
inset 3D inset border
outset 3D outset border
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-style values.

border-style: dotted
<style>
  .border-example {
    padding: 20px;
    border-width: 3px;
    border-color: firebrick;
    border-style: dotted;
  }
</style>

<div class="border-example">
  border-style: dotted
</div>

The previous example only use a single value for their border style. To see different borders styles on an element click the multiple border-style values.

Multiple borders
<style>
  .border-example-multiple {
    padding: 20px;
    border-width: 3px;
    border-color: steelblue;
    border-style: dotted solid;
  }
</style>

<div class="border-example-multiple">
  Multiple borders
</div>

Code Explanation

Borders are applied according to the number of values specified in the border-style property.

  • Single value: all four sides of the element
  • Two values: top and bottom, left and right sides
  • Three values: top, left and right, and bottom sides
  • Four values: top, right, bottom, and left sides respectively

Browser support

This table shows when border-style support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
5.5 Jul 2000
Opera
9.2 Apr 2007
Safari
1.0 Jun 2003

You may also like

Guides