CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS border-top attribute CSS border-spacing attribute

CSS border-style attribute usage and example

border-The style CSS attribute is used to set a single border style attribute, that isborder-top-style,border-right-style,border-bottom-styleAndborder-left-styleShorthand properties.

The following table provides usage descriptions and version histories of this attribute, as well as the syntax of its use in JavaScript scripts.

Default value:	none
Applies to:	All elements
Inheritance:	None
Animated:	No.See Animation properties.
Version:	CSS 1,2,3
JavaScript syntax:	object object.style.borderStyle="dotted double"

border-style usage syntax

The syntax of this attribute is as follows:

border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]　1　to　4　values | initial | inherit

This shorthand notation can take one, two, three, or four space-separated values.

If specifiedOne valueIt will be applied to all four borders.
If specifiedTwo valuesThe first value applies to the top and bottom borders, while the second value applies to the right and left borders.
If specifiedThree valuesThe first value applies to the top border, the second value applies to the left and right borders, and the third value applies to the bottom border.
If specifiedFour valuesIf specified, each value will be applied to the border in the order of top, right, bottom, and left.

The following examples demonstrate how to use border-style attribute.

Example

　　p {
　　　border-style: double;
　　　border-width:　5px;
　　}

Test see‹/›

Attribute value

The following table describes the value of this attribute.

Value	Description
none	No border is displayed.
hidden	Similar to none, the difference is that the table cell hasCollapsible borderAnd the two cells share the border. The hidden value ensures that the border is not drawn because hidden has priority over all other border styles.
dotted	Display the border as a series of dots.
dashed	Display the border as a series of short line segments, that is, dashes.
solid	Display the border as a single solid line.
double	Display the border as two parallel solid lines, leaving a certain space between them. The total of the two lines and the space between them is equal toborder-widthvalue.
groove	Displaying a border that is carved into the canvas. It gives the impression of3The impression of D, usually achieved by using a colorborder-colorTwo colors, one lighter and one darker, are created to achieve the shadow.
ridge	Displaying a border that is the opposite of the effect. It also gives a3The impression of D, the border looks as if it is coming out of the canvas.
inset	Displaying a border that makes the element's box look as if it is embedded in the canvas. It gives the impression of3D, this is usually achieved by creating a shadow with two colors, one darker than the border colorborder-colorslightly brighter and darker.
outset	Displaying a border that is the opposite of the effect. It also gives a3The impression of D, the border makes the box look as if it is coming out of the canvas.
inherit	If specified, the associated element uses its parent element's border-top-The value of the style attribute.

Browser compatibility

border-Compatibility of the style attribute of the browser, the numbers in the following table indicate the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Browser support– Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+

Warning: Internet Explorer 7and earlier versions do not support the hidden value. IE8supports, but requires a<!DOCTYPE>.IE9and higher versions support the hidden value.

For further reading

See tutorial:CSS Border,CSS3 Border.