border-top-style

Summary

Sets the style of an element’s top border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style.

Overview table

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

Syntax

border-top-style: dashed
border-top-style: dotted
border-top-style: double
border-top-style: groove
border-top-style: hidden
border-top-style: inset
border-top-style: none
border-top-style: outset
border-top-style: ridge
border-top-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 or square 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.

Examples

Border styles in CSS.

.one {
  border-top-style: none;
}

.two {
  border-top-style: outset;
}

.three {
  border-top-style: hidden;
}

.four {
  border-top-style: dotted;
}

.five {
  border-top-style: dashed;
}

.six {
  border-top-style: solid;
}

.seven {
  border-top-style: double;
}

.eight {
  border-top-style: groove;
}

.nine {
  border-top-style: ridge;
}

.ten {
  border-top-style: inset;
}

View live example

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

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]