CSS border-right-width: Set or Change the Width of the Right Border

The CSS border-right-width property is used when we need to set the width of the right border of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 3px solid chocolate; padding: 10px; border-right-width: 10px;}
   </style>
</head>
<body>

   <p>This is a para.</p>
   
</body>
</html>

Output

This is a para.

In the above example, the following CSS code:

border: 3px solid chocolate;

makes the "p" element's border a 3-pixel wide, solid line with the color "chocolate." This results in a rectangular border surrounding the paragraph. Now the following CSS code:

padding: 10px;

creates a space of 10 pixels between the paragraph's content and its border. This improves the readability of the text within the paragraph and adds some visual breathing room around it. And then the following CSS code:

border-right-width: 10px;

specifies the width of the "p" element's right-hand border in pixels. This results in a thicker border on the right side of the paragraph, making it more interesting and visually appealing.

Finally, the code contains an HTML "p" element containing the text "This is a para." When a web browser loads the page, the paragraph is styled according to the CSS rules defined in the style block. It will have a chocolate-colored border, a padding of 10 pixels around the content, and a thicker right-hand border.

CSS border-right-width syntax

The syntax of the border-right-width property in CSS is:

border-right-width: x;

The value of x should be any of the following:

thin: used to define a thin right border
medium: used to define the medium right border
thick: used to define a thick right border
length: used to define a custom size right border
initial: used to define the default value for the size of the right border
inherit: used to inherit the value from its parent

Note: In all the above, medium is the default value.

Advantages of the border-right-width property in CSS

You can create unique and customized designs for your web pages by adjusting the width of a single border.
Thicker borders on certain sides of an element can be used to create a visual hierarchy, drawing attention to specific parts of the design.
To create more complex border styles, use "border-right-width" in conjunction with other border properties.

Disadvantages of the border-right-width property in CSS

Excessive use of "border-right-width" can make a design appear cluttered and confusing, so use it sparingly and with caution.
Because the "border-right-width" property is not supported by all browsers, it may not be visible on all devices or platforms.
If you use "border-right-width" on some elements but not others, your design will be inconsistent and disjointed.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!