Article Categories

Selected Reading

Usage of border-right-style property in CSS

Javascript Web Development Front End Scripts

The border-right-style property in CSS sets the line style of an element's right border. It determines how the right border appears, whether solid, dashed, dotted, or other styles.

Syntax

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

Property Values

Value	Description
`none`	No border (default)
`solid`	Single solid line
`dashed`	Series of dashes
`dotted`	Series of dots
`double`	Two solid lines
`groove`	3D grooved appearance
`ridge`	3D ridged appearance

Example: Different Border Styles

<html>
  <head>
    <style>
      .border-example {
        padding: 10px;
        margin: 10px 0;
        border-right-width: 4px;
        border-right-color: #333;
      }
    </style>
  </head>
  <body>
    <div class="border-example" style="border-right-style: solid;">
      Solid right border
    </div>
    
    <div class="border-example" style="border-right-style: dashed;">
      Dashed right border
    </div>
    
    <div class="border-example" style="border-right-style: dotted;">
      Dotted right border
    </div>
    
    <div class="border-example" style="border-right-style: double;">
      Double right border
    </div>
  </body>
</html>

Example: Complete Border Setup

<html>
  <head>
    <style>
      .complete-border {
        padding: 15px;
        margin: 10px;
        border-right-width: 3px;
        border-right-style: dashed;
        border-right-color: #007bff;
        background-color: #f8f9fa;
      }
    </style>
  </head>
  <body>
    <div class="complete-border">
      This element has a blue dashed right border with 3px width
    </div>
  </body>
</html>

Key Points

The border-right-style property only affects the right border
You must set border-right-width for the style to be visible
Use with border-right-color to complete the border appearance
The shorthand border-right property combines width, style, and color

Browser Compatibility

The border-right-style property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 4+.

Conclusion

The border-right-style property provides control over the right border's appearance. Combine it with width and color properties for complete border styling, and use it to create visual separation or emphasis on the right side of elements.

Samual Sam

Updated on: 2026-03-15T23:18:59+05:30

148 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next