CSS border-style Property

CSS border-style property is a shorthand property for setting all the border style properties in one statement.

Following properties can be sets,

Usages

The following table outline the usages and version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderStyle = "double"

Syntax

Here is a syntax for the CSS border-style property

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

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

  • If one value is specified, it applies the same style to all four border sides.
  • If two value are specified, the first style applies to the top and bottom and second style applies to the left and right.
  • If three value are specified, the first style applies to the top, second style applies to the left and right, and third style applies to the bottom.
  • If four value are specified, each style applies to the top, right, bottom, left border respectively.

Property Values

The following table describes the values of this property.

Value Description
none Default. Displays no border.
hidden same as none, except table cells border conflict resolution
dotted Displays the border as a series of rounded dots
dashed Displays the border as a series of short square dashes
solid Displays the border as a single solid line
double Displays the border as a two parallel solid lines with some space between them equals the value of border-width.
groove Displays the border as a grooved border. It's depend border-color value to creating shadow from two colors that are slightly lighter and darker than the border-color
ridge Displays the border as a ridged border that is opposite of groove effect.
inset Displays the border as a inset border, it's look as though it were embedded in the canvas. It's depend border-color value to creating shadow from two colors that are slightly lighter and darker than the border-color
outset Displays the border as a outset border that is opposite of inset effect.
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets border style.

.border-1 {
  border-style: solid;
}
.border-2 {
  border-style: none;
}
.border-3 {
  border-style: inset;
}
.border-4 {
  border-style: dashed solid;
}
.border-5 {
  border-style: dashed double none;
}
.border-6 {
  border-style: dashed double none solid;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 4+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.