CSS Reference Property

border-right

The border-right property is a shorthand property used to specify the width, style and color of the right border of an element.

It is a shorthand property for the longhand properties: border-right-width, border-right-style and border-right-color properties of an element.

The border-right property can accept one, two or three arguments as a value—omitted values are set to their initial values.

Official Syntax

  • Syntax:

    border-right: <line-width> || <line-style> || <color>
    
  • Initial: 0 none currentColor, which is the concatenation of the initial values of the long-hand properties.
  • Applies To: all elements
  • Animatable: The width and color of the border are animatable.

Values

<line-width>

The width of the right border. Refer to the border-right-width property entry for a list of possible values.

<line-style>

The style of the right border. Refer to the border-right-style property entry for a list of possible values.

<color>
The color of the right border. Refer to the border-right-color property entry for a list of possible values.

Examples

The following are all valid border-right values set on an element.

.element {
    border-right: 1em; /* style and color are set to their initial values */

    /* or */
    border-right: dotted deepPink; /* width is set to its initial value (0), which means that no right border will be set */

    /* or */
    border-right: 1px dotted #eee;

    /* or */
    border-right: 10px solid #009966;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Written by

Last updated February 4, 2015 at 2:45 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.