CSS Reference Manual

CSS @rules (RULES)

All CSS properties

CSS border-top-width attribute CSS3 border-top-right-radius attribute

CSS border-top-Usage and examples of style attribute

border-top-The style attribute sets the style of the top border of the element separately. However, in many cases, likeborder-styleOrborder-topThis shorthand CSS property is more convenient and preferable to use.

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

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

border-top-Syntax of style usage

The syntax of this attribute is as follows:

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

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

Example

　　p {
　　　border-top-style: dashed;
　　　border-top-width:　3px;
　　}

Test to see‹/›

Attribute value

The table below describes the value of this property.

Value	Description
none	No border is displayed.
hidden	is the same as none, but the difference is that the table cell hasCollapsible borderAnd the two cells share a border. The hidden value ensures that the border is not drawn because hidden takes precedence 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 solid line.
double	Display the border as two parallel solid lines, with a certain space between them. The sum of the two lines and the space between them equalsborder-widthvalue.
groove	Display a border carved into the canvas. It gives the impression of3The impression of D, usually achieved by using a colorborder-colorShadows are created with two colors, lighter and darker than the border color.
ridge	Display a border groove that is the opposite of the effect. It also gives a3The impression of D, the border looks like it's coming out of the canvas.
inset	Display a border that makes the element's box look like it's embedded in the canvas. It gives the impression of3D, this is usually achieved by creating a shadow with two colors, darker than the border colorborder-colorslightly brighter and darker.
outset	Display a border inset that is the opposite of the effect. It also gives a3The impression of D, the border makes the box look like it's coming out of the canvas.
initial	Set this property to its default value.
inherit	If specified, the associated element uses its parent element's border-top-The value of style's properties.

Browser compatibility

border-top-Browser compatibility of the style attribute, the numbers in the table below represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+

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