CSS border-style Property

❮ Previous Complete CSS Reference Next ❯

Example

Set a style for the border:

div {border-style: dotted;}

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

Show demo ❯

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.borderStyle="dotted double" Try it

Browser Support

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

Property
border-style	1.0	4.0	1.0	1.0	3.5

Note: The value "hidden" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later support "hidden".

CSS Syntax

Property Values

Value	Description	Demo
none	Default value. Specifies no border	Demo ❯
hidden	The same as "none", except in border conflict resolution for table elements	Demo ❯
dotted	Specifies a dotted border	Demo ❯
dashed	Specifies a dashed border	Demo ❯
solid	Specifies a solid border	Demo ❯
double	Specifies a double border	Demo ❯
groove	Specifies a 3D grooved border. The effect depends on the border-color value	Demo ❯
ridge	Specifies a 3D ridged border. The effect depends on the border-color value	Demo ❯
inset	Specifies a 3D inset border. The effect depends on the border-color value	Demo ❯
outset	Specifies a 3D outset border. The effect depends on the border-color value	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

A dashed border:

div {border-style: dashed;}

Try it Yourself »

Example

A solid border:

div {border-style: solid;}

Try it Yourself »

Example

A double border:

div {border-style: double;}

Try it Yourself »

Example

A groove border:

div {
border-style: groove;
border-color: coral;
border-width: 7px;
}

Try it Yourself »

Example

A ridge border:

div {
border-style: ridge;
border-color: coral;
border-width: 7px;
}

Try it Yourself »

Example

An inset border:

div {
border-style: inset;
border-color: coral;
border-width: 7px;
}

Try it Yourself »

Example

An outset border:

div {
  border-style: outset;
  border-color: coral;
  border-width: 7px;
}

Try it Yourself »

Example

Set different borders on each side of an element:

p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}

Try it Yourself »

CSS tutorial: CSS Border

HTML DOM reference: borderStyle property

❮ Previous Complete CSS Reference Next ❯