CSS border-right-width Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-right-width CSS property determines the width of the right border of an element. It allows web developers to specify the thickness of the border on the right side of an HTML element, such as a div or a table cell. This property is part of the broader set of properties used for controlling the appearance of borders around elements, along with "border-style" and "border-color." By adjusting the value of "border-right-width," designers can create visually appealing layouts with varying border thickness on different sides of an element, enhancing the overall aesthetics of their web pages.

Initial value: medium
Applies to: All elements
Inherited: No
Computed value: Absolute length; '0' if the border style is 'none' or 'hidden'
Animatable: Yes
JavaScript syntax: object.style.borderRightWidth

Interactive Demo

border-right-width: 4px;

border-right-width: 1em;

border-right-width: thick;

border-right-width: 9mm;

border-right-width: transparent;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-right-width: <line-width>

Values

<line-width> = <length> | thin | medium | thick

thinLess than the default width.
mediumDefault value.
thickGreater than the default width.
<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
inherit

Example

HTML

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

CSS

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

Result

Editor