CSS border-right-style Property

Example

Set a style for the right border:

div {border-right-style: dotted;}

Definition and Usage

The border-right-style property sets the style of an element's right border.

Default value: none
Inherited: no
Animatable: no.
Version: CSS1
JavaScript syntax: object.style.borderRightStyle="dotted"

  • Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
  • object - object in javascript means the element on which border-right-style is applied.
  • Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property          
border-right-style 1.0 4.0 1.0 1.0 3.5

CSS Syntax

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

Property Values

Value Description Demo
none Specifies no border. This is default
hidden The same as "none", except in border conflict resolution for table elements
dotted Specifies a dotted border
dashed Specifies a dashed border
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
initial Sets this property to its default value.  
inherit Inherits this property from its parent element.  

More Examples

Example

A dashed right border:

div {border-right-style: dashed;}

Example

A solid right border:

div {border-right-style: solid;}

Example

A double right border:

div {border-right-style: double;}

Example

Remove the right border:

div {border-right-style: none;}

Example

A groove right border:

div {
  border-right-style: groove;
  border-right-color: coral;
  border-right-width: 7px;
}

Example

A ridge right border:

div {
  border-right-style: ridge;
  border-right-color: coral;
  border-right-width: 7px;
}

Example

An inset right border:

div {
  border-right-style: inset;
  border-right-color: coral;
  border-right-width: 7px;
}

Example

An outset right border:

div {
  border-right-style: outset;
  border-right-color: coral;
  border-right-width: 7px;
}

Comments