Border-style, propriété CSS

This page is also about physical property(ies):

- border-bottom-style

Sets the line style for the border below the element.

- border-left-style

Sets the border style for the left side of the element.

- border-right-style

Sets the line style for the right border of the element.

- border-top-style

Sets the line style for the left border of the element.

And the logical properties:

- border-block-end-style

Sets the style of the border strokes for the end side of the blocks.

- border-block-start-style

Sets the border style on the end side of the blocks.

- border-block-style

Sets the style of border strokes for the start and end sides of blocks.

- border-inline-end-style

Sets the style of the border strokes, for the end side of the lines.

- border-inline-start-style

Sets the style of the border line, for the beginning side of the lines.

- border-inline-style

Sets the style of the border strokes, for the beginning and end sides of the lines.

border-style

Summary of characteristics of the `border-style` property

Quick description

Sets the line type for some or all four borders around the element (solid, double, dotted...).

Status

Standard

Predefined values

Percentages

Not applicable.

Initial value

none

Inherited by default

No.

Animation type

Discrète: during an animation, the border-style property passes from one value to another without transition.

Canonical order

Per grammar: serialization in the order of syntax.

W3C Module

CSS Backgrounds and Borders Module

References (W3C)

🡇

🡅

CSS Backgrounds and Borders Module Level 3

Document status: CR (Candidate Recommendation)

CSS Logical Properties and Values Level 1

Document status: WD (Working Draft)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Cascading Style Sheets specification - Version 1

Document status: DEPR (Old specification, declared obsolete or superseded)

Syntax diagram of `border-style`.

Syntax diagram of the border-style property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

Description of the `border-style` property.

The property border-style sets the type of line used for an element's borders (single, double, dotted, etc).

The property border-style accepts one to four values:

If only one value is given, it applies to all four sides of the element.

When two values are specified, the first sets the border type for the top and bottom; the second for the left and right borders.

If three values are given, the first sets the border type for the top, the second for the right and left borders, and the last for the bottom border.

Finally, when all four values are given, they correspond to the top, right, bottom, and left border types, respectively.

The borders of elements are drawn in front of the background but behind the content. This can matter when the border and content overlap, like when there's a rounded corner and the padding isn't enough.

In the case of a dashed border style, the spacing and length of the dashes are not defined in the specification. So there might be slight differences from one browser to another. Also the specification also doesn't define how different line styles join at the corners.

For a general overview of borders in CSS, see the shorthand property border.

Language support.

The so-called "logical" properties take into account the meaning and writing direction, with the following equivalents for Latin languages. The interactive diagram below shows the correspondence with the physical properties depending on the language used.

border-block-start-style

Sets the border style on the end side of the blocks.

border-block-end-style

Sets the style of the border strokes for the end side of the blocks.

border-inline-start-style

Sets the style of the border line, for the beginning side of the lines.

border-inline-end-style

Sets the style of the border strokes, for the end side of the lines.

You need to add both shorthand property border-block-style and border-inline-style, which each take two values and let you set the values for start and end in a single line.

border-top-style

border-left-style

The direction and writing mode of this text adapt to the chosen language.

border-right-style

border-bottom-style

Values for `border-style`.

Note: the standard does not define the length of dashes or the spacing between them. So small differences may appear from one browser to another. Generally, browsers try to make the connections of the dashes in the corners symmetrical.

border-style: none;

Default value. No border.
border-style: hidden;

The border is invisible but its thickness still counts.
border-style: double;

Many line styles are available for borders.

solid
A simple line.

double
A double line.

dotted
A dotted line (dots).

dashed
A dotted line (dashes).

groove
A line with 3D effect
Groove.

ridge
A line with 3D effect
Ridge.

inset
A line with a 3D effect
The element looks like it is sunken.

outset
A stroke with 3D effect
The element looks like it is raised.

Notes:
- For values with a 3D effect: double, groove, ridge, inset, and outset, the thickness should be at least 2 pixels for the effect to be visible. A thickness of 3 pixels is even recommended for a nicer look.
- For styles with a 3D effect, colors that are too light or too dark (white, black) ruin the effect: pick a mid-tone color (like gray, for example).
border-style: dotted double; border-style: dotted double dashed; border-style: dotted double dashed solid;

Several values can be listed, separated by spaces. CSS always uses the same rules to apply these values to each of the four edges of the element:

border-style:dotted;

When only one value is present, it applies to all four sides.

border-style:dotted double;

Two values separated by a space. The first applies to the top and bottom strokes, and the second to the right and left strokes.

border-style:dotted double dashed;

Three values separated by a space. The first one applies to the top line, the second to the right and left lines, and the last one to the bottom line.

border-style: dotted double dashed solid;

Finally, with four values, we go clockwise starting from the top edge.
border-style: initial; (none) border-style: inherit; border-style: revert; border-style: revert-layer; border-style: revert-rule; border-style: unset;

Common values are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the `border-style` property.

The animation of border-style is rough: it jumps from one value to another with no transition, which is normal since the property doesn't take numerical values.

Access the `border-style` property via a program

Change the border line style in JavaScript.

In JavaScript, here's how to change the value of border-style for an el element. Two syntaxes are accepted: they mainly differ in how to write the property name:

Notation in kebab-case: a dash to separate the words.
Notation in camel case: a capital letter to separate words.


	let el = document.getElementById('id');
	el.style['border-style'] = 'double';
	// or
	let el = document.getElementById('id');
	el.style.borderStyle = 'double';

Read the border line style in JavaScript.

The code below retrieves the value of the property if it has been set directly on the element via its style attribute in the HTML code. The value set in the style sheet through a CSS selector is not taken into account by this code.


	let el = document.getElementById('id');
	let value = el.style['border-style'];
	// or
	let el = document.getElementById('id');
	let value = el.style.borderStyle;

Read the computed value of `border-style` in Javascript.

The computed value is always defined. It can be in the order:

The value set via the style attribute in the HTML code.
The value assigned in the style sheet via a CSS selector. If multiple values are assigned by different selectors, the computed value results from applying the priority rules (see Priorities).
Finally, if no value is assigned by any of the means above, the computed value is the initial value of the property (none in the case of border-style).


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('border-style');

Change the value of the `border-style` property with JQuery.


 $('#id').css('border-style', 'double');
 // or
 $('#id').css('borderStyle', 'double');

Read the computed value of the property `border-style` with JQuery.


	let value = $('#id').css('border-style');

Test it yourself.

To see what the assigned and computed values of border-style look like, use the buttons below.

Browsers compatibility with `border-style`.

The property border-style is properly supported by all modern browsers, both with physical borders (top, right, bottom, left) and logical ones (block and inline).

Column 1

Support for the border-style property allowing you to choose the line style for borders.

Column 2

Support for logical properties (sensitive to the writing mode of the language) allowing the definition of border styles.

border-style
(physical properties)

border-style
(logical properties)

Estimated overall support.

96%

94%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `border-style` property.

Cascading Style Sheets specification - Version 1

This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.

Regarding border-style Initial definition of the shorthand property border-style and the corresponding longhand properties.

November 17, 1995
Working Draft.
November 12, 1996
Proposed for recommendation.
December 17, 1996
Recommendation .
September 13, 2018
Old specification, declared obsolete.
Cascading Style Sheets Level 2 - Revision 1 Specification

This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

Regarding border-style No change to the properties defining the border style, except that they accept the inherit value.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Logical Properties and Values Level 1

This specification module defines properties that indirectly define certain other properties depending on the writing mode: left to right, right to left, or top to bottom. They are useful in simple and generic style sheets, such as browser style sheets, but can also save a few lines of styles for documents containing both left-to-right and right-to-left text.

Regarding border-style Introduction of logical properties (supporting language-dependent writing mode).

May 18, 2017
Working Draft.
CSS Backgrounds and Borders Module Level 3

Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.

Regarding border-style No change regarding these properties.

August 02, 2002
Working Draft.
December 17, 2009
Candidate Recommendation.