border-style property

Specifies the style of the left, right, top, and bottom borders of the object.

CSS Backgrounds and Borders Module Level 3, Section 4.2

Syntax

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4}

Property values

none

Initial value. Border is not drawn, regardless of any border-width.

hidden

Internet Explorer 8 and later. Same as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.

dotted

Border is a dotted line.

dashed

Border is a dashed line.

solid

Border is a solid line.

double

Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border.

groove

3-D groove is drawn in colors based on the value.

ridge

3-D ridge is drawn in colors based on the value.

inset

3-D inset is drawn in colors based on the value.

outset

3-D outset is drawn in colors based on the value.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuenone

Standards information

Remarks

Illustrations of the above values are shown in the image below.

An illustration of all of the values for border-style

Examples

The following example shows how to use border-style to apply different border styles on the same div element.


<div id="multiple">
   border-style: dotted dashed ridge double;
</div> 

In the CSS below, border-style is set to dotted dashed ridge double. This sets the border-top-style to dotted, border-left-style to dashed, border-bottom-style to ridge, and border-right-style to double.

An image showing different border styles applied to one element


#multiple {
  width: 250px;
  background-color: #E6E6E6;
  border-style: dotted dashed ridge double;
  border-width: 6px;
  border-color: #000080;	
}

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
border

 

 

Show:
© 2014 Microsoft. All rights reserved.