border-style property - CSS Reference

Definition and Usage

The border-style CSS property is a shorthand property for setting the line style for all four sides of the elements 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.

Initial the concatenation of the initial values of its longhand properties:
- border-top-style: none
- border-right-style: none
- border-bottom-style: none
- border-left-style: none
Applies to all elements
Inherited no
Media visual
Computed Value as each of the properties of the shorthand:
- border-bottom-style: as specified
- border-left-style: as specified
- border-right-style: as specified
- border-top-style: as specified
Animatable no
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <br-style>{1,4}

border-style: style                  /* One-value syntax   */  E.g. border-style: dashed;
border-style: vertical horizontal    /* Two-value syntax   */  E.g. border-style: dotted solid;
border-style: top horizontal bottom  /* Three-value syntax */  E.g. border-style: hidden double dashed;
border-style: top right bottom left  /* Four-value syntax  */  E.g. border-style: none solid dotted dashed;
border-style: inherit

Values

<br-style>

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

Style	Preview	Description
`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 are not defined by the specification and are 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`.