English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS reference manual

CSS @rules

CSS attribute大全

CSS border-right-Usage and examples of style attribute

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

The following table provides usage instructions and version history of this attribute, as well as the syntax of its use 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.borderRightStyle="dashed"

border-right-The syntax of style usage

The syntax of this attribute is as follows:

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

The following example demonstrates how to use border-right-style attribute.

  p {
   border-right-style: dashed;
   border-right-width: 3px;
  }
Test to see‹/›

Attribute value

The table below describes the value of this attribute.

ValueDescription
noneNo border will be displayed.
hiddenis the same as none, but 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.
dottedDisplay the border as a series of dots.
dashedDisplay the border as a series of short line segments, that is, dashes.
solidDisplay the border as a solid line.
doubleDisplay the border as two parallel solid lines, leaving a certain space between them. The sum of the two lines and the space between them is equal toborder-widthvalue.
grooveDisplay the border as if it is carved into the canvas. It gives a3The impression of D, usually achieved by using a colorborder-colortwo colors, one lighter and one darker, to create a shadow to achieve the impression.
ridgeDisplay the border groove, which 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.
insetDisplay makes the element's box look like it is embedded in the canvas. It gives the impression that3D, this is usually achieved by creating a shadow with two colors, one darker than the border colorborder-colorslightly brighter and darker.
outsetDisplay the border inset, which 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.
initialSet this property to its default value.
inheritIf specified, the associated element adopts its parent element's border-right-Value of style attribute.

Browser compatibility

border-right-Browser compatibility of the style attribute, the numbers in the table below indicate 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.IE9and higher versions support the hidden value.

Further reading

See tutorial:CSS Border,CSS3 Border.

Related properties:border,border-style,border-right,border-right-color,
border-right-width.