border-style
============

The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `border-bottom-style`
* `border-left-style`
* `border-right-style`
* `border-top-style`
Syntax
------


```css
/\* Keyword values \*/
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;

/\* top and bottom | left and right \*/
border-style: dotted solid;

/\* top | left and right | bottom \*/
border-style: hidden double dashed;

/\* top | right | bottom | left \*/
border-style: none solid dotted dashed;

/\* Global values \*/
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;
```


The `border-style` property may be specified using one, two, three, or four values.

* When **one** value is specified, it applies the same style to **all four sides**.
* When **two** values are specified, the first style applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first style applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the styles apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).

Each value is a keyword chosen from the list below.

### Values

`<line-style>`

Describes the style of the border. It can have the following values:

`none`

Like the `hidden` keyword, displays no border. Unless a `background-image` is set, the computed value of the same side's `border-width` will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `none` value has the *lowest* priority: if any other conflicting border is set, it will be displayed.

`hidden`

Like the `none` keyword, displays no border. Unless a `background-image` is set, the computed value of the same side's `border-width` will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `hidden` value has the *highest* priority: 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 computed value of the same side's `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 size defined by `border-width`.

`groove`

Displays a border with a carved appearance. It is the opposite of `ridge`.

`ridge`

Displays a border with an extruded appearance. It is the opposite of `groove`.

`inset`

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

`outset`

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


Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-top-style`: `none`
* `border-right-style`: `none`
* `border-bottom-style`: `none`
* `border-left-style`: `none`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| 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
 |
| Animation type | discrete |

Formal syntax
-------------
```

border-style =   
  <line-style>{1,4}    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### All property values

Here is an example of all the property values.

#### HTML


```html
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>
```


#### CSS


```css
pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/\* border-style example classes \*/
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-style |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The border-related shorthand CSS properties: `border`, `border-width`, `border-color`, `border-radius`