# border-style property

The `border-style` property specifies a border style for all sides simultaneously or separately for each side. It is a shorthand property for the following properties: `border-left-style`, `border-right-style`, `border-top-style`, `border-bottom-style`.

## Syntax

`selector { border-style: value; }`

## Values

Value | Description
--- | ---
`solid` | Solid line.
`dotted` | Dotted border.
`dashed` | Dashed border.
`ridge` | Border as a ridge line.
`double` | Double line border. To see the effect, the border width should be at least `3px`.
`groove` | Grooved border.
`inset` | Inset border.
`outset` | Outset border.
`none` | No border.

Default value: `none`.

## Number of values

The property can take `1`, `2`, `3` or `4` values separated by a space:

Number | Description
--- | ---
`1` | Type for all sides at once.
`2` | The first value is for top and bottom, the second is for left and right borders.
`3` | The first value is for top, the second is for left and right borders, the third is for bottom.
`4` | The first value is for the top border, the second is for right, the third is for bottom, the fourth is for the left border.

## Example . The solid value

`<div id="elem"></div>` `#elem { border-width: 1px; border-style: solid; border-color: black; width: 300px; height: 100px; }`

:

## Example . The dotted value

`<div id="elem"></div>` `#elem { border-width: 1px; border-style: dotted; border-color: black; width: 300px; height: 100px; }`

:

## Example . The dashed value

`<div id="elem"></div>` `#elem { border-width: 1px; border-style: dashed; border-color: black; width: 300px; height: 100px; }`

:

## Example . The ridge value

`<div id="elem"></div>` `#elem { border-width: 3px; border-style: ridge; border-color: black; width: 300px; height: 100px; }`

:

## Example . The double value

`<div id="elem"></div>` `#elem { border-width: 3px; border-style: double; border-color: black; width: 300px; height: 100px; }`

:

## Example . The groove value

`<div id="elem"></div>` `#elem { border-width: 3px; border-style: groove; border-color: black; width: 300px; height: 100px; }`

:

## Example . The inset value

`<div id="elem"></div>` `#elem { border-width: 3px; border-style: inset; border-color: black; width: 300px; height: 100px; }`

:

## Example . The outset value

`<div id="elem"></div>` `#elem { border-width: 3px; border-style: outset; border-color: black; width: 300px; height: 100px; }`

:

## Example

This example specifies different border types for different sides of elements:

`<div id="elem"></div>` `#elem { border-width: 1px; border-style: solid dotted dashed dotted; border-color: black; width: 300px; height: 100px; }`

:

## Example

And now different sides of the element are also given different border width and color:

`<div id="elem"></div>` `#elem { border-width: 1px 2px 3px 4px; border-style: dashed dotted solid double; border-color: red blue green black; width: 300px; height: 100px; }`

:

## Example

Currently the upper and lower borders are set to `solid`, and the right and left borders are set to `dotted`:

`<div id="elem"></div>` `#elem { border-width: 1px; border-style: solid dotted; border-color: black; width: 300px; height: 100px; }`

:

## See also

- the `border-color` property
  that sets a border color
- the `border-width` property
  that sets a border width
- the `border` property
  that is a shorthand property for a border

← →
↑
en ru