CODESCRACKER

CSS border-right: Set or Change the Right Border of an Element

The CSS border-right property is used when we need to set the width, style, and color of the right border at once. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p {border-right: 8px solid chocolate; padding: 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:

p {border-right: 8px solid chocolate; padding: 10px;}

targets all "p" elements and sets their border and padding properties. The "border-right" property specifically sets a solid right border of 8 pixels in width with a chocolate color. The "padding" property adds 10 pixels of padding to the top, bottom, left, and right sides of the "p" element.

Finally, the code includes a "p" element with the text "This is a para.". The "p" element has a solid right border of 8 pixels in width with a chocolate color and 10 pixels of padding on all sides.

The border-right is basically used as a shorthand for following three properties:

Note: In all three properties, the border-right-style is required.

CSS border-right syntax

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

border-right: width style color|initial|inherit;

Note: The initial is used to set the default color. The inherit is used to inherit the value from its parent.

Advantages of the border-right property in CSS

Disadvantages of the border-right property in CSS

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!