CSS Syntax

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value	Description	Play it
none	Default value. Specifies no border	Play it »
hidden	The same as "none", except in border conflict resolution for table elements	Play it »
dotted	Specifies a dotted border	Play it »
dashed	Specifies a dashed border	Play it »
solid	Specifies a solid border	Play it »
double	Specifies a double border	Play it »
groove	Specifies a 3D grooved border. The effect depends on the border-color value	Play it »
ridge	Specifies a 3D ridged border. The effect depends on the border-color value	Play it »
inset	Specifies a 3D inset border. The effect depends on the border-color value	Play it »
outset	Specifies a 3D outset border. The effect depends on the border-color value	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
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 »

---

Related Pages

CSS tutorial: CSS Border

HTML DOM reference: borderStyle property