Style border Style Property

Style border Style Property

It sets the line style for all four sides of an element border.

It is used to set the individual border style properties.

for example:

1) border-style: dotted solid double dashed;

the top border is dotted

the right border is solid

the bottom border is double

the left border is dashed

2) border-style: dotted solid double;

the top border is dotted

the right and right borders are solid

the bottom border is double

3) border-style: dotted solid ;

the top and bottom borders are dotted

the right and right borders are solid

4) border-style: dotted ;

all four(top, bottom, left, right) borders are dotted

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property	chrome	firefox	microsoft edge	opera
border-style	1.0	1.0	4.0	3.5

Syntax

For example

Output

Property Values

Value	Description
none	Specifies no border. This is default
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
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Technical Details

Default value:	none
Version:	CSS1
Inherited	no
Animatable	no
JavaScript syntax:	object.style.borderStyle="dotted double"