CSS border-right Property

CSS border-right property is a shorthand property for setting all the right border properties in one statement.

CSS border-right property all values are optional except border-style.

Following properties can be sets,


The following table outline the usages and version history of this property.

Default value: See individual properties
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderRight = "2px solid grey"


Here is a syntax for the CSS border-right property

border-right: border-width | border-style | border-color | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
border-right-width Specifies the width of the right border of an element
border-right-style Specifies the style of the right border of an element
border-right-color Specifies the color of the right border of an element
transparent value also accepted here
initial Sets default value of this property
inherit Inherits this property from its parent element.


The example below shows to sets right border width, style, color values.

.border-1 {
  border-right: 5px solid pink;
.border-2 {
  border-right: 5px dashed pink;
.border-3 {
  border-right: 5px dotted pink;
.border-4 {
  border-right: 5px double pink;
.border-5 {
  border-right: 5px groove pink;
.border-6 {
  border-right: 5px ridge pink;
.border-7 {
  border-right: 5px inset pink;
.border-8 {
  border-right: 5px outset pink;
.border-9 {
  border-right: 5px hidden pink;
.border-10 {
  border-right: none;

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 4+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.