CSS border-right-style Property
Description
The border-right-style
property sets the style of the right border of an element. Note that in many cases the shorthand CSS property border-style is more convenient and preferable.
- Initial value
- none
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- Specified value
- Animatable
- No
- CSS Version
- CSS2, CSS3
- JavaScript syntax
- object.style.borderRightStyle
Syntax
border-right-style: <line-style>
Values
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset- noneBorder is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn.
- hiddenSame as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
- dottedA series of round dots.
- dashedA series of square-ended dashes.
- solidA single line segment.
- doubleTwo parallel solid lines with some space between them.
- grooveDisplays a border leading to a carved effect. It is the opposite of ridge.
- ridgeLooks as if it were coming out of the canvas.
- insetLooks as if the content on the inside of the border is sunken into the canvas.
- outsetLooks as if the content on the inside of the border is coming out of the canvas.
- inherit
Example
<div class="border">This is an example of the border-right-style property using a red solid border 3px in width.</div>
.border {
border: 1px solid blue;
border-right-style: solid;
border-right-width: 3px;
border-right-color: red;
margin: 20px;
padding: 20px;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
5.5 | 12 | 1 | 1 | 9.2 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 14 | 14 | 1 | 1.0 |
Last updated by CSSPortal on: 12th October 2019