CSS border-style property

Definition and Usage

The border-style property is used to set the style of all borders of an element, or to set the border style individually for each border.

The border may only appear when this value is not 'none'.

Example 1

border-style:dotted solid double dashed;
  • The top border is dotted
  • The right border is solid
  • The bottom border is double
  • The left border is dashed

Example 2

border-style:dotted solid double;
  • The top border is dotted
  • The right border and the left border are solid
  • The bottom border is double

Example 3

border-style:dotted solid;
  • The top border and the bottom border are dotted
  • The right border and the left border are solid

Example 4

border-style:dotted;
  • All 4 borders are dotted

See also:

CSS Tutorial:CSS Borders

HTML DOM Reference Manual:borderStyle property

Example

Set the style for 4 borders:

p
  {
  border-style:solid;
  }

Try it yourself

CSS syntax

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property values

Values Description
none Defines no border.
hidden Same as "none". However, it is not applied to tables; for tables, "hidden" is used to resolve border conflicts.
dotted Defines a dotted border. It is usually rendered as a solid line in most browsers.
dashed Defines a dashed line. It is usually rendered as a solid line in most browsers.
solid Defines a solid line.
double Defines a double line. The width of the double line is equal to the border-width value.
groove Defines a 3D groove border. Its effect depends on the border-color value.
ridge Defines a 3D bevel border. Its effect depends on the border-color value.
inset Defines a 3D inset border. Its effect depends on the border-color value.
outset Defines a 3D outset border. Its effect depends on the border-color value.
inherit Specifies that the border style should be inherited from the parent element.

Description

The most unpredictable border style is double. It is defined as the width of two lines plus the space between them equal to the border-width value. However, the CSS specification does not say whether one line is thicker than the other or whether both lines should be of the same thickness, nor does it indicate whether the space between the lines should be thicker than the lines. All of these are decided by the user agent, and creators have no influence on this decision.

Technical details

Default value: not specified
Inheritance: no
Version: CSS1
JavaScript syntax: object.style.borderStyle="dotted double"

More examples

Set the style for all four borders
This example demonstrates how to set the style for all four borders.
Set different borders for each side
This example demonstrates how to set different borders on each side of an element.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5