CSS border-style Property

CSS border-style property is used to set the style of all four sides of an element’s border in a single declaration. It is a shorthand of the below four properties:

The border-style property can accept one, two, three or four values at a time. Different number of values specified to the border-style property affects each border side differently. Let’s discuss each:

If only one value is specified:

  • border-style: val;

The same style applies to all four sides of the border. Refer to the example below:

Example:

h1{
  border-style: solid;
}

If two values are specified:

  • border-style: val1 val2;

The first value(val1) applies to the top and bottom borders and the second value(val2) applies to the left and right borders. Refer to the example below:

Example:

h1{
  border-style: solid dashed;
}

If three values are specified:

  • border-style: val1 val2 val3;

The first value(val1) applies to the top border, the second value(val2) applies to the left and right borders and the third value(val3) applies to the bottom border of the element. Refer to the example below:

Example:

h1{
  border-style: solid dashed dotted;
}

If four values are specified:

  • border-style: val1 val2 val3 val4;

The first value(val1) applies to the top border, the second value(val2) applies to the right border, the third value(val3) applies to the bottom border and the fourth value applies to the left border of the element. Refer to the example below:

Example:

h1{
  border-style: solid dashed dotted double;
}

CSS has several border styles available. All these border styles are listed below:

Example:

.p1{ border-style: none }
.p2{ border-style: hidden }
.p3{ border-style: solid }
.p4{ border-style: dashed }
.p5{ border-style: dotted }
.p6{ border-style: double }
.p7{ border-style: groove }
.p8{ border-style: ridge }
.p9{ border-style: inset }
.p10{ border-style: outset }

CSS Syntax

The border-style property has the following syntax:

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

Property Values

The border-style property accepts the following values:

noneThis is the default value. No border is displayed.
hiddenThe border remains hidden.
dottedSpecifies a dotted border.
dashed Specifies a dashed border.
solidSpecifies a solid border.
doubleSpecifies a double border.
grooveSpecifies a 3D groove border. The 3D effect depends on the border color.
ridgeSpecifies a 3D ridge border. The 3D effect depends on the border color.
insetSpecifies a 3D inset border. The 3D effect depends on the border color.
outsetSpecifies a 3D inset border. The 3D effect depends on the border color.
initialSets the border-style property its default value(none).
inheritInherits the border-style property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.borderStyle = “dashed dotted”;

Related Pages

CSS Tutorial: CSS Borders