border-right property CSS Reference



Definition and Usage

The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.

  • Initial the concatenation of the initial values of its longhand properties:
    • border-right-width: medium
    • border-right-style: none
    • border-right-color: currentColor
  • Applies to all elements
  • Inherited no
  • Media visual
  • Computed Value as each of the properties of the shorthand:
    • border-right-width: the absolute length or 0 if border-right-style is none or hidden
    • border-right-style: as specified
    • border-right-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
  • Animatable as each of the properties of the shorthand:
    • border-right-color: yes, as a color
    • border-right-style: no
    • border-right-width: yes, as a length
  • Canonical order order of appearance in the formal grammar of the values

Syntax

Formal syntax: <br-width> || <br-style> || <color>

Values

<br-width> 
See border-right-width.
<br-style> 
See border-right-style.
<color> 
See border-right-color.

Examples

The three component of a right borders can be defined: width, style and color.
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample {
  border-right: 3px solid #000;
} 
The style can be set to any border-right-style value.
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample {
  border-right: 3px dotted #000;
} 
The color can be set to any border-right-color value.
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample {
  border-right: 3px solid #f00;
} 
The width can be set to any border-right-width value.
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample {
  border-right: 1px solid #000;
} 
The values can be declared in any order.
<div class="sample" style="width:100px;height:100px;background-color:rgb(255, 240, 245)"></div>
  
.sample {
  border-right: blue solid 2px;
} 

Compatibility

Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 4 3.5 1.0 (85)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) (Yes) (Yes) (Yes)

Relative articles