CSS border-style

Demo

The CSS border-style property allows you to set the border style on all sides of an element.

You can supply from one to four values. Each value specifies the style for each side of the element. For example, if four values are provide, they will apply to the top, right, bottom and left borders — in that order. Supplying one value applies the style to all four sides.

Syntax

border-style: <border-style1>, <border-style2> ...

Possible Values

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Specifications

Initial Value
none
Applies To
All elements.
Inherited?
Yes
Media
Visual

Example Code

div.border-style {border-style:dotted dashed solid double}