CSS border-style Property

Set a CSS border-style:

div {border-style: dotted;}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The border-style property sets the style of an element’s four borders. This property can have from one to four values.

Examples:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style: dotted;
    • all four borders are dotted
Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderStyle=”dotted double” Try it

CSS Syntax
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property Values
Value Description Code
none Default value. Specifies no border div {
border-width:5px;
border-style:none;
}
hidden The same as “none”, except in border conflict resolution for table elements div {
border-width:5px;
border-style:hidden ;
}
dotted Specifies a dotted border div {
border-width:5px;
border-style:dotted ;
}
dashed Specifies a dashed border div {
border-width:5px;
border-style:dashed;
}
solid Specifies a solid border div {
border-width:5px;
border-style:solid ;
}
double Specifies a double border div {
border-width:5px;
border-style:double ;
}
groove Specifies a 3D grooved border. The effect depends on the border-color value div {
border-width:5px;
border-style:groove;
}
ridge Specifies a 3D ridged border. The effect depends on the border-color value div {
border-width:5px;
border-style:ridge;
}
inset Specifies a 3D inset border. The effect depends on the border-color value div {
border-width:5px;
border-style:inset;
}
outset Specifies a 3D outset border. The effect depends on the border-color value div {
border-width:5px;
border-style:outset;
}
initial Sets this property to its default value. Read about initial div {
border-width:5px;
border-style:initial;
}
inherit Inherits this property from its parent element. Read about inherit
A dashed border:
div {border-style: dashed;}

Try it Yourself »

A solid border:
div {border-style: solid;}

Try it Yourself »