CSS border-right-style

The border-right-style property in CSS is used to set the style of the right border of an element. This property works in conjunction with other border properties such as border-right-width and border-right-color to fully customize the appearance of the right border.

The border-right-style property accepts various values to define the style of the right border. Some of the common values include:

none: No border is displayed on the right side.
solid: A solid line border is displayed on the right side.
dashed: A dashed line border is displayed on the right side.
dotted: A dotted line border is displayed on the right side.

Let's see some examples to understand how the border-right-style property works.

Result:


    <div style="border-right-style: solid; border-right-width: 2px; border-right-color: blue;">
      This is a div element with a solid blue right border.
    </div>

This is a div element with a solid blue right border.

In the example above, we have set the border-right-style property to solid, border-right-width to 2px, and border-right-color to blue for the div element. As a result, the div has a solid blue right border.

Now let's see another example with different values for the border-right-style property:

Result:


    <p style="border-right-style: dotted; border-right-width: 1px; border-right-color: red;">
      This is a paragraph with a dotted red right border.
    </p>

This is a paragraph with a dotted red right border.

In this example, we have set the border-right-style property to dotted, border-right-width to 1px, and border-right-color to red for the p element. This results in a paragraph with a dotted red right border.

By using the border-right-style property along with other border properties, you can customize the appearance of the right border of an element according to your design requirements.