CSS Border-style Property

From http://www.w3schools.com (Copyright Refsnes Data)

# CSS border-style Property

Complete CSS Reference

## Definition

The border-style property sets the style of the four borders, can have from one to four styles.

Inherited: No

## JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.borderStyle="dotted double"

In our HTML DOM tutorial you can find more details about the borderStyle property.

In our HTML DOM tutorial you can also find a full Style Object Reference.

## Example

table {border-style: dotted}
all four borders will be dotted

table {border-style: dotted dashed}
top and bottom border will be dotted, left an right border will be dashed

table {border-style: dotted dashed solid}
top border will be dotted, left and right border will be dashed, bottom border will be solid

table {border-style: dotted dashed solid double}
top border will be dotted, right border will be dashed, bottom border will be solid, left border will be double

## Possible Values

Value | Description
--- | ---
none | Defines no border
hidden | The same as "none", except in border conflict resolution for table elements
dotted | Defines a dotted border
dashed | Defines a dashed border
solid | Defines a solid border
double | Defines two borders. The width of the two borders are the same as the border-width value
groove | Defines a 3D grooved border. The effect depends on the border-color value
ridge | Defines a 3D ridged border. The effect depends on the border-color value
inset | Defines a 3D inset border. The effect depends on the border-color value
outset | Defines a 3D outset border. The effect depends on the border-color value

## Try-It-Yourself Demos

Set the style of the four borders
This example demonstrates how to set the style of the four borders.

Set different borders on each side
This example demonstrates how to set different borders on each side of the element.

Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.

Set the width of the bottom border
This example demonstrates how to set the width of the bottom border.

Set the width of the left border
This example demonstrates how to set the width of the left border.

Set the width of the right border
This example demonstrates how to set the width of the right border.

Set the width of the top border
This example demonstrates how to set the width of the top border.

All the width border properties in one declaration
This example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values.

Complete CSS Reference

From http://www.w3schools.com (Copyright Refsnes Data)