CSS border-style
Description
The border-style property is a short-hand command to define the border styles of all sides an html element. Each side can have a different style.
No default.
Set the border style for all sides of an element:
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: inherit;
Set different border styles for individual sides of an html element:
border-style: style style style style; /* e.g. border-style: dotted dashed dotted dashed; */
See also: border-top-style, border-bottom-style, border-left-style, border-right-style.
Examples for Border
Example 1:
This is the most straightforward example, all borders the same style of outset.
test text test text test text test text
<style>
#test { border-color: blue; border-style: outset; }
</style>
<div id="test">test text test text test text test text</div>
Example 2:
This example shows different styles set for each border.
test text test text test text test text
<style>
#test2 { border-style: dashed double inset groove; border-color: red; }
</style>
<div id="test2">test text test text test text test text</div>
Values for Border
| border-style |
none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit |
Set the style of the whole border of an html element. Can specify one style for all borders or different styles for each side of the html element. |
| border-left-style |
none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit |
Specifies the style of the left border. |
| border-right-style |
none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit |
Specifies the style of the right border. |
| border-top-style |
none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit |
Specifies the style of the left border. |
| border-bottom-style |
none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit |
Specifies the style of the left border. |