Description

The property border-right-style sets the style of an element’s right-hand border using the values specified.

Borders are placed on top of the element’s background.

Value

none

none means no border will show, and the computed border-width is zero.

hidden

hidden has the same meaning as none, except when it refers to table borders in cases where two cells share a border, and the table cells have collapsed borders (border-collapse:collapse;). The value hidden ensures that no border is drawn, since hidden takes precedence over all other border styles. If none had been used for one border in the cell, the border would still be drawn, as the adjacent cell’s border would take precedence. See Table Formatting for more information.

dotted

dotted implements the border as a series of dots.

dashed

dashed implements the border as a series of dashes.

solid

solid implements the border as a solid line.

double

double implements the border as two solid lines. The sum of the two border widths and the space between them equals the value that has been set for border-width.

groove

groove is a three-dimensional effect that gives the impression that the border is carved into the canvas.

ridge

ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.

inset

inset is a 3D effect that gives the impression that the box is embedded into the canvas. When it’s used on tables to which the separated borders model has been applied, the inset value appears to make the whole box look as though it were embedded into the canvas. When used with the collapsing border model, it’s treated the same as the value ridge.

outset

outset is a 3D effect that has the opposite effect of inset in that the border gives the impression that the box protrudes from the canvas. When it’s used on tables to which the separated borders model has been applied, the border makes the whole box look as though it were coming out of the canvas. When it’s used with the collapsing border model, it behaves the same way as groove.

Previously, in CSS1, user agents were allowed to interpret all dotted, dashed, double, groove, ridge, inset, and outset styles as solid.

Compatibility

User agents are supposed to place borders on the element’s background, but in Internet Explorer for Windows versions up to and including 7, the background only reaches the inside edge of the border when the element has a layout. This means that for dotted or dashed borders, the background won’t be visible through the spaces within the border. When the element doesn’t have a layout, the background will extend under the borders.

When dotted borders are specified as the border-style, and the border’s width is only 1px, Internet Explorer for Windows versions up to and including 6 will display the borders as dashed instead of dotted. At a width of 2px and above, the dotted borders will display correctly. This glitch was fixed in Internet Explorer Version 7 for cases when all four sides are set to 1px. However, if one of the sides is set to 2px or more, the 1px dotted borders revert to dashed in IE7.

The appearance of the borders may vary between user agents (within limits). The algorithms that define the relationship between the colors used to achieve an effect (for example, groove, ridge, inset, and outset) are not explicitly defined in the CSS specifications, so the colors may vary between user agents. In CSS2.1, the three-dimensional border styles (groove, ridge, inset, and outset) depend on the corresponding border-color, rather than on color.

Internet Explorer Windows version 8 still has problems with 1px dashed borders and will initially display the area between the borders as white instead of transparent. The borders revert to transparent after other page elements receive focus (such as tabbing to links in the page).

Internet Explorer for Windows versions up to and including 7:

• don’t support the value hidden
• don’t support the value inherit

In Chrome Versions 2 & 3 border-left and border-right dotted borders with a value of 1px do not display uniformly and merge in places to form a solid line.