This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

border-style

Summary

Sets the style of an element’s four borders. This property can have from one to four values. With only one value, the value will be applied to all four borders; otherwise, this works as a shorthand property for each of border-top-style, border-right-style, border-bottom-style, border-left-style, where each border style may be assigned a separate value.

Overview table

Initial value
none
Applies to
All elements
Inherited
No
Media
visual
Computed value
specified value
Animatable
No
CSS Object Model Property
borderStyle
Percentages
N/A

Syntax

  • border-style: <border-top-style> <border-right-style> <border-bottom-style> <border-left-style>
  • border-style: dashed
  • border-style: dotted
  • border-style: double
  • border-style: groove
  • border-style: hidden
  • border-style: inset
  • border-style: none
  • border-style: outset
  • border-style: ridge
  • border-style: solid

Values

none
Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See background-image.
hidden
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
A series of round dots.
dashed
A series of square-ended dashes.
solid
A single line segment.
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
Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border-color.)
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.
outset
Looks as if the content on the inside of the border is coming out of the canvas.
<border-top-style> <border-right-style> <border-bottom-style> <border-left-style>
Shorthand values syntax.

Examples

Border styles in CSS.

.one {
  border-style: none;
}

.two {
  border-style: outset;
}

.three {
  border-style: hidden;
}

.four {
  border-style: dotted;
}

.five {
  border-style: dashed;
}

.six {
  border-style: solid;
}

.seven {
  border-style: double;
}

.eight {
  border-style: groove;
}

.nine {
  border-style: ridge;
}

.ten {
  border-style: inset;
}

View live example

Usage

 * Up to four different styles can be specified, in the following order: top, right, bottom, left.
  • If one style is specified, it is used for all four sides. If two styles are specified, the first is used for the top and bottom borders, and the second is used for left and right borders. If three styles are specified, they are used for top, right/left, and bottom borders, respectively. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.

Notes

  • Borders are drawn in front of the element’s background, but behind the element’s content (in case it overlaps).
  • There is no control over the spacing of the dots and dashes, nor over the length of the dashes.
  • How borders of different styles are joined in the corner may vary.
  • Rounded corners may cause the corners and the contents to overlap, if the padding is less than the radius of the corner.

Related specifications

CSS Level 3 - Backgrounds and Borders Module
Candidate Recommendation

See also

Other articles

Related CSS properties:

Related tutorials:

External resources

Attributions