CSS border-right-style: Set or Change the Style of the Right Border

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

HTML with CSS Code
<!DOCTYPE html>
      p {border: 6px dashed chocolate; padding: 10px; border-right-style: solid;}

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

This is a para.

The paragraph (p) element is given the CSS border-right-style property using the code above.

The right border style of an element is defined by the border-right-style property. The right border of the paragraph will be a solid line in this instance because the border-right-style property is set to "solid."

The border-width, border-style, and border-color properties of the paragraph are also set using the "border" shorthand property. Given that the border property is currently set to 6px dashed chocolate, the paragraph will have a border that is 6 pixels wide and the color chocolate.

The "padding" property is also used to control how much space is added inside the paragraph's border. The padding property in this instance is set to 10px, which means that there will be 10 pixels between the text and the paragraph's border.

CSS border-right-style Syntax

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

border-right-style: solid|dashed|dotted|double|ridge|groove|inset|outset|initial|inherit|none|hidden;

Note: All border style values are described in a separate post.

Advantages of the "border-right-style" property in CSS

Disadvantages of the "border-right-style" property in CSS

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!