CSS border-style

The CSS border-style property allows you to set the border style on all sides of an element.

You can supply from one to four values. Each value specifies the style for each side of the element.

For example, if four values are provided, they will apply to the top, right, bottom and left borders (in that order). Supplying one value applies the style to all four sides. Supplying three values applies the styles to top, left and right, and bottom (in that order).

Syntax

Where

Details on these values below.

Possible Values

none: No border. Color and width are ignored. Therefore, the border's width is 0, and the initial value of border-image-width will also resolve to zero.

Note that when using the collapsing border model (border-collapsed tables), a none value may not always appear to work, due to another element having a non-none value. This is because multiple elements can share the same edge in border-collapsed tables. For example, a table, tbody, tr, and td could all share the same edge and have different border settings.

To completely turn the border off, either make all elements that share that edge none, or use hidden on any of the elements that share that edge.
hidden: Same as none, but in the collapsing border model (border-collapsed tables), also inhibits any other border. In other words, when multiple edges come together with different border settings (for example, a table and a td, each with their own border settings), if any one of those is hidden, it will prevent any border at that edge. This is different to none, in that all elements meeting that edge must have none before the border is omitted.
dotted: A series of round dots.
dashed: A series of square-ended dashes.
solid: A single line segment.
double: Two parallel solid lines with some space between them. When using this value, the border-width value determines the sum of the lines and the space between them.
groove: Looks as if it were carved in the canvas.
ridge: Looks as if it were coming out of the canvas.
inset: Looks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in the collapsing border model.
outset: Looks as if the content on the inside of the border is coming out of the canvas. Treated as groove in the collapsing border model.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: none (based on the intial value of the individual properties).
Applies To: All elements.
Inherited?: No
Media: Visual
Animatable: Discrete

Example Code

Official Specifications

CSS Backgrounds and Borders Module Level 3 (W3C Candidate Recommendation Draft, 11 March 2024)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.