Scholar Repository
Home>Manual>CSS Border-style Property

CSS Border-style Property

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

CSS border-style Property


CSS Reference 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.


CSS Reference Complete CSS Reference

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

Home>Manual>CSS Border-style Property