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:

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

Advantages of the border-right-width property in CSS

Disadvantages of the border-right-width property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!