border-style

Summary

The border-style property is a shorthand property for setting the line style for all four sides of the element´s border.

Note: The default value of border-style is none. This means that if you change the border-width and the border-color, you will not see the border unless you change this property to something other than none or hidden.

Values

<br-style>

Is a keyword describing the style of the bottom border. It can have the following values:

none

Like for the hidden keyword, displays no border. In that case, except if a background image is set, the calculated values of border-width will be 0, even if specified otherwise through the property. In case of table cell and border collapsing, the none value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.

hidden

Like for the none keyword, displays no border. In that case, except if a background image is set, the calculated values of border-width will be 0, even if specified otherwise through the property. In case of table cell and border collapsing, the hidden value has the highest priority: it means that if any other conflicting border is set, it won't be displayed.

dotted

Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-width.

dashed

Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

solid

Displays a single, straight, solid line.

double

Displays two straight lines that add up to the pixel amount defined as border-width .

groove

Displays a border leading to a carved effect. It is the opposite of ridge.

ridge

Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of groove.

inset

Displays a border that makes the box appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.

outset

Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.