CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS border-bottom-width Attribute CSS3 border-bottom-right-radius Attribute

CSS border-bottom-Usage and examples of style attribute

border-bottom-The style CSS attribute is used to set the style of the bottom border of an element individually. However, in our actual work, we usually useborder-styleorborder-bottomto define the border style.

The following table provides usage instructions and version history for this attribute, as well as the syntax used 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 object.style.borderBottomStyle="dashed"

border-bottom-Syntax of style usage

The syntax of this attribute is as follows:

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

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

Example

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

Test see‹/›

Attribute Value

The table below describes the value of this attribute.

Value	Description
none	Display without border.
hidden	Same as 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 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 total of the two lines and the space between them is equal toborder-widthvalue.
groove	Display the border that is carved into the canvas. It gives a feeling of3D's impression, usually achieved by using a colorborder-colorTwo colors that are lighter and darker are created to achieve the shadow.
ridge	Display the opposite border to the effect, groove. It also gives a3D's impression, the border looks like it's coming out of the canvas.
inset	Display the border that makes the element's box look like it's embedded in the canvas. It gives the impression that3D, which is usually achieved by creating a shadow in two colors, darker than the border colorborder-colorslightly brighter and darker.
outset	Display the opposite border to the effect. It also gives a3D's impression, the border makes the box look like it's coming out of the canvas.
initial	Set this attribute to its default value.
inherit	If specified, the associated element adopts its parent element's border-bottom-Calculated value of style attributes.

Browser Compatibility

border-bottom-Browser compatibility of style attributes, the numbers in the table below represent the minimum version number of the browser that supports the 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. IE8supports, but requires a.IE9and higher versions support the hidden value.