CSS border-style Property

Example

Set the style of the four borders:

p
{
border-style:solid;
}

Try it yourself »

More examples at the bottom of this page.

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:	not specified
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.borderStyle="dotted double"

The border-style property is supported in all major browsers.

Note: No versions of Internet Explorer (including IE8) support the property values "inherit" or "hidden".

Value	Description
none	Specifies no border
hidden	The same as "none", except in border conflict resolution for table elements
dotted	Specifies a dotted border
dashed	Specifies a dashed border
solid	Specifies a solid border
double	Specifies a double border
groove	Specifies a 3D grooved border. The effect depends on the border-color value
ridge	Specifies a 3D ridged border. The effect depends on the border-color value
inset	Specifies a 3D inset border. The effect depends on the border-color value
outset	Specifies a 3D outset border. The effect depends on the border-color value
inherit	Specifies that the border style should be inherited from the parent element

Set different borders on each side
How to set different borders on each side of an element.

CSS tutorial: CSS Border