Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Change the style of the right border with CSS

Javascript Web Development Front End Scripts

The border-right-style property in CSS controls the appearance and style of an element's right border. It accepts various values like solid, dashed, dotted, double, and more to create different visual effects.

Syntax

border-right-style: value;

Common Values

Value Description
solid Single solid line
dashed Dashed line pattern
dotted Dotted line pattern
double Two parallel solid lines
none No border (default)

Example: Different Right Border Styles

<html>
<head>
<style>
.solid-border {
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: #333;
    padding: 10px;
    margin: 5px 0;
}

.dashed-border {
    border-right-width: 3px;
    border-right-style: dashed;
    border-right-color: #007bff;
    padding: 10px;
    margin: 5px 0;
}

.dotted-border {
    border-right-width: 4px;
    border-right-style: dotted;
    border-right-color: #28a745;
    padding: 10px;
    margin: 5px 0;
}

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

Shorthand Property

You can combine border-right properties using the shorthand border-right property:

<html>
<head>
<style>
.shorthand-example {
    border-right: 3px solid #333;
    padding: 15px;
    background-color: #f8f9fa;
}
</style>
</head>
<body>
    <div class="shorthand-example">
        Using border-right shorthand property
    </div>
</body>
</html>

Key Points

  • The border-right-style property only affects the right border of an element
  • You must set a border width for the style to be visible
  • The default value is none, which means no border is displayed
  • Combine with border-right-width and border-right-color for complete styling

Conclusion

The border-right-style property provides flexible options for styling the right border of elements. Use it with appropriate width and color properties to create visually appealing border effects.

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

180 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements