CSS Border-Right-Width Control Right Border Width

Introduction to CSS border-right-width

The border-right-width property in CSS sets the width of the right border of an element. This property is crucial for web design, allowing you to control the thickness of the right border to enhance the layout and appearance of elements on a webpage.

Specification

The border-right-width property is defined in the CSS Backgrounds and Borders Module Level 3. This module outlines the standards for setting border properties, ensuring consistency across different browsers.

Description

The border-right-width property in CSS lets you specify the width of the right border of an element. This property is essential for fine-tuning the appearance of borders, which can significantly impact the overall design and layout of a webpage.

Syntax

The border-right-width property defines the width of the right border of an element. The syntax is straightforward and allows for various values, including predefined keywords and specific length units.

border-right-width: <length> | thin | medium | thick | inherit | initial | revert | revert-layer | unset;

Keyword Values

• thin: Sets the right border to a thin width.
• medium: Sets the right border to a medium width (default value).
• thick: Sets the right border to a thick width.

Length Values

• <length>: Specifies the width using units like px (pixels), em (relative to the font size), rem (relative to the root font size), vw (viewport width), or vh (viewport height).

Global Keywords

• inherit: Inherits the value from the parent element.
• initial: Sets the value to its default (medium).
• revert: Reverts to the browser’s default value.
• revert-layer: Reverts to the value specified by the user or user-agent stylesheet.
• unset: Resets the value to its inherited value if it inherits, or to its initial value if it does not.

Values

The border-right-width property can take various values, including predefined keywords, length values, and global keywords. These values allow you to precisely control the width of the right border of an element.

Keyword Values

• thin: Sets the right border to a thin width.
• medium: Sets the right border to a medium width.
• thick: Sets the right border to a thick width.

Length Values

• <length>: Specifies the width using units like px, em, rem, vw, or vh.

Global Keywords

• inherit: Inherits the value from the parent element.
• initial: Sets the value to its default (medium).
• revert: Reverts to the browser’s default value.
• revert-layer: Reverts to the value specified by the user or user-agent stylesheet.
• unset: Resets the value to its inherited value if it inherits, or to its initial value if it does not.

Examples

Here are some examples to illustrate how to use the border-right-width property with different values:

Using Keyword Values

.element-thin {
  border-right-width: thin;
}

.element-medium {
  border-right-width: medium;
}

.element-thick {
  border-right-width: thick;
}

Using Length Values

.element-10px {
  border-right-width: 10px;
}

.element-2em {
  border-right-width: 2em;
}

.element-3rem {
  border-right-width: 3rem;
}

.element-4vw {
  border-right-width: 4vw;
}

.element-5vh {
  border-right-width: 5vh;
}

Using Global Keywords

.element-inherit {
  border-right-width: inherit;
}

.element-initial {
  border-right-width: initial;
}

.element-revert {
  border-right-width: revert;
}

.element-revert-layer {
  border-right-width: revert-layer;
}

.element-unset {
  border-right-width: unset;
}

Formal Definition

The border-right-width property is defined in the CSS Backgrounds and Borders Module Level 3. Here are the key aspects:

Initial Value

• medium: The default value for the border-right-width property is medium.

Applies To

• All elements: You can apply this property to any HTML element, including special pseudo-elements like ::first-letter.

Inherited

• No: The border-right-width property is not inherited from parent elements by default.

Computed Value

• Absolute length or 0: The computed value is either an absolute length (e.g., 10px) or 0 if the border-right-style is set to none or hidden.

Animation Type

• Length: The border-right-width property animates as a length.

Formal Syntax

border-right-width = <line-width>;

<line-width> = <length> | thin | medium | thick;
<length> = <number> (px | em | rem | vw | vh);

Keyword Values

The border-right-width property allows you to specify the width of the right border using predefined keywords. These keywords provide a simple and convenient way to set the border thickness without specifying exact measurements. The available keyword values are:

• thin: Sets the right border to a thin width.
• medium: Sets the right border to a medium width (default value).
• thick: Sets the right border to a thick width.

Example: Using Keyword Values

.thin-border {
  border-right-width: thin;
}

.medium-border {
  border-right-width: medium;
}

.thick-border {
  border-right-width: thick;
}

Length Values

The border-right-width property can also be specified using length values. Length values provide precise control over the width of the right border, allowing you to set it to an exact measurement. This is particularly useful when you need to fine-tune the appearance of your elements to match a specific design requirement.

You can use various units to specify the length values, including:

• px: Pixels.
• em: Relative to the font size of the element.
• rem: Relative to the font size of the root element.
• vw: Viewport width.
• vh: Viewport height.

Example: Using Length Values

.border-10px {
  border-right-width: 10px;
}

.border-2em {
  border-right-width: 2em;
}

.border-3rem {
  border-right-width: 3rem;
}

.border-4vw {
  border-right-width: 4vw;
}

.border-5vh {
  border-right-width: 5vh;
}

Global Keywords

The border-right-width property in CSS supports global keywords that let you control the border width dynamically. These keywords are handy when you need to reset or inherit border widths.

Here are the global keywords for border-right-width:

• inherit: Takes the border width from the parent element.
• initial: Sets the border width to the default value (medium).
• revert: Uses the value specified by the user-agent stylesheet.
• revert-layer: Uses the value specified by the user or user-agent stylesheet, based on the cascade layer.
• unset: Resets the border width to its inherited value if it inherits, or to its initial value if it does not.

Example: Using Global Keywords

.element-inherit {
  border-right-width: inherit;
}

.element-initial {
  border-right-width: initial;
}

.element-revert {
  border-right-width: revert;
}

.element-revert-layer {
  border-right-width: revert-layer;
}

.element-unset {
  border-right-width: unset;
}

Formal Syntax for border-right-width Property

border-right-width = <line-width>;

<line-width> = <length> | thin | medium | thick;
<length> = <number> (px | em | rem | vw | vh);

Real-World Examples

Example 1: Using Keyword Values

CSS:

.thin-border {
  border-right-width: thin;
  border-style: solid;
  padding: 10px;
}

.medium-border {
  border-right-width: medium;
  border-style: solid;
  padding: 10px;
}

.thick-border {
  border-right-width: thick;
  border-style: solid;
  padding: 10px;
}

HTML:

<div class="thin-border">Thin Border</div>
<div class="medium-border">Medium Border</div>
<div class="thick-border">Thick Border</div>

Example 2: Using Length Values

CSS:

.border-10px {
  border-right-width: 10px;
  border-style: solid;
  padding: 10px;
}

.border-2em {
  border-right-width: 2em;
  border-style: solid;
  padding: 10px;
}

.border-3rem {
  border-right-width: 3rem;
  border-style: solid;
  padding: 10px;
}

.border-4vw {
  border-right-width: 4vw;
  border-style: solid;
  padding: 10px;
}

.border-5vh {
  border-right-width: 5vh;
  border-style: solid;
  padding: 10px;
}

HTML:

<div class="border-10px">10px Border</div>
<div class="border-2em">2em Border</div>
<div class="border-3rem">3rem Border</div>
<div class="border-4vw">4vw Border</div>
<div class="border-5vh">5vh Border</div>

Example 3: Using Global Keywords

CSS:

.parent {
  border-right-width: 5px;
  border-style: solid;
  padding: 10px;
}

.child-inherit {
  border-right-width: inherit;
  border-style: solid;
  padding: 10px;
}

.child-initial {
  border-right-width: initial;
  border-style: solid;
  padding: 10px;
}

.child-revert {
  border-right-width: revert;
  border-style: solid;
  padding: 10px;
}

.child-revert-layer {
  border-right-width: revert-layer;
  border-style: solid;
  padding: 10px;
}

.child-unset {
  border-right-width: unset;
  border-style: solid;
  padding: 10px;
}

HTML:

<div class="parent">
  Parent Element
  <div class="child-inherit">Child Inherit</div>
  <div class="child-initial">Child Initial</div>
  <div class="child-revert">Child Revert</div>
  <div class="child-revert-layer">Child Revert-Layer</div>
  <div class="child-unset">Child Unset</div>
</div>

Example 4: Combining with Other Border Properties

CSS:

.styled-element {
  border-right-width: 5px;
  border-right-style: solid;
  border-right-color: blue;
  border-bottom-width: 3px;
  border-bottom-style: dashed;
  border-bottom-color: green;
  border-left-width: 2px;
  border-left-style: dotted;
  border-left-color: red;
  border-top-width: 4px;
  border-top-style: double;
  border-top-color: orange;
  padding: 10px;
}

HTML:

<div class="styled-element">Styled Element</div>

Example 5: Animating border-right-width

CSS:

@keyframes borderAnimation {
  0% {
    border-right-width: 0;
  }
  100% {
    border-right-width: 10px;
  }
}

.animated-border {
  border-right-style: solid;
  border-right-color: red;
  animation: borderAnimation 2s infinite;
  padding: 10px;
}

HTML:

<div class="animated-border">Animated Border</div>

Specifications

The border-right-width property is defined in the CSS Backgrounds and Borders Module Level 3. Here are the key aspects:

Initial Value

• medium: The default value for the border-right-width property is medium.

Applies To

• All elements: You can apply this property to any HTML element, including special pseudo-elements like ::first-letter.

Inherited

• No: The border-right-width property is not inherited from parent elements by default.

Computed Value

• Absolute length or 0: The computed value is either an absolute length (e.g., 10px) or 0 if the border-right-style is set to none or hidden.

Animation Type

• Length: The border-right-width property animates as a length.

For more details, refer to the official CSS Backgrounds and Borders Module Level 3 specification:

CSS Backgrounds and Borders Module Level 3

Browser Support

The border-right-width property is widely supported across all major browsers, making it a reliable tool for web developers.

For the latest compatibility info, check out Can I use.

Related Properties

Here are some related properties to help you control borders:

1. border-bottom-width: Sets the bottom border width.
2. border-left-width: Sets the left border width.
3. border-top-width: Sets the top border width.
4. border-width: Sets the width of all four borders.
5. border-right-style: Sets the style of the right border.
6. border-right-color: Sets the color of the right border.
7. border: Shorthand for setting all border properties.
8. border-right: Shorthand for setting right border properties.

Helpful Resources

• MDN Web Docs - border-right-width
• CSS-Tricks - A Complete Guide to CSS Borders
• W3Schools - CSS Border Property
• Can I Use - border-right-width
• CSS Backgrounds and Borders Module Level 3

FAQs

What does border-right-width do?

border-right-width sets the width of the right border of an element.

What units can be used with border-right-width?

You can use pixels (px), ems (em), rems (rem), viewport width (vw), viewport height (vh), and keywords like thin, medium, and thick.

How do I set a thin right border?

.thin-border {
  border-right-width: thin;
}

.thin-border-px {
  border-right-width: 1px;
}

Can border-right-width be different from other border widths?

Yes, you can set border-right-width independently.

.element {
  border-right-width: 5px;
  border-left-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

Does border-right-width affect the element’s layout?

Yes, it can impact the element’s total width and affect the layout.

What are the predefined keywords for border-right-width?

• thin
• medium (default)
• thick

Can I animate border-right-width?

Yes, you can animate border-right-width.

@keyframes borderAnimation {
  0% {
    border-right-width: 0;
  }
  100% {
    border-right-width: 10px;
  }
}

.animated-border {
  border-right-style: solid;
  border-right-color: red;
  animation: borderAnimation 2s infinite;
}

What is the initial value of border-right-width?

The initial value is medium.

Which browsers support border-right-width?

All major browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera.

How do I set border-right-width to its default value?

.element {
  border-right-width: initial;
}

Can I use border-right-width with pseudo-elements?

Yes, you can use it with pseudo-elements like ::first-letter.

h1::first-letter {
  border-right-width: thick;
}

These FAQs should help you understand border-right-width and how to use it effectively. Happy coding!