CSS border-right Property

Description

The CSS property border-right is used to define the styling of the right border of an element in a webpage. It allows web developers to specify the border's width, style, and color. For example, you can set the border-right property to create a solid, dashed, or dotted line on the right side of an element, and you can customize its color to match your design preferences. This property is part of a set of border properties that enable fine-grained control over an element's border appearance, helping to enhance the overall layout and visual presentation of web content. Individual properties are: border-right-color, border-right-style, and border-right-width.

Initial value

See individual properties

Applies to

All elements

Inherited

No

Computed value

See individual properties

Animatable

Yes

JavaScript syntax

object.style.borderRight

Interactive Demo

border-right: 3px solid red;

border-right: 2px dashed #1ECBE1;

border-right: 1rem dotted rgb(156, 234, 87);

border-right: thick solid rgba(123, 45, 87, .5);

border-right: solid;

border-right: dashed purple;

Syntax

border-right: <line-width> || <line-style> || <color> 

Values

• <line-width>See border-right-width CSS property for values.
• <line-style>See border-right-style CSS property for values.
• <color>See border-right-color CSS property for values.
• inherit

Example

<div class="border">This is an example of the border-right property using a red solid border 3px in width.</div>

.border {
   border: 1px solid blue;
   border-right: 3px solid red;
   margin: 20px;
   padding: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS border-right property.

Desktop
12	1	1	9.2	1

Tablets / Mobile
18	14	14	1	1	37

Last updated by CSSPortal on: 31st December 2023