CSS border-right-style Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-right-style property in CSS is used to specify the style of the right border of an element.

This property allows you to define how the right edge of an element should be displayed, whether as a solid line, a dashed line, or even no line at all. It is a crucial part of styling borders, especially when you want to have different styles for different sides of an element.

💡 Syntax

The syntax for the border-right-style property is simple and follows the general pattern of other border-related properties.

Syntax

Copied

element {
  border-right-style: value;
}

Here, value can be any of the predefined border styles such as solid, dashed, dotted, etc.

🎛️ Default Value

The default value of the border-right-style property is none, meaning no border is displayed on the right side of the element unless explicitly defined.

🏠 Property Values

The border-right-style property supports several values, each determining a different style for the right border:

Value	Description
none	No border is displayed (this is the default value).
solid	A solid line border.
dashed	A dashed line border.
dotted	A dotted line border.
double	A double line border.
groove	A 3D grooved border.
ridge	A 3D ridged border.
inset	A 3D inset border.
outset	A 3D outset border.
hidden	The border is hidden, similar to none but still affects the element's layout.

📄 Example

In this example, we'll set the right border style of a box to be solid.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-right-style Example</title>
  <style>
    .box {
      border-right-style: solid;
      border-width: 5px;
      border-color: #3498db;
      padding: 20px;
      width: 200px;
    }
  </style>
</head>
<body>
  <h1>Box with Solid Right Border</h1>
  <div class="box">
    This box has a solid right border.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-right-style property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a well-established property, so you can use it confidently across various platforms without compatibility concerns.

🎉 Conclusion

The border-right-style property is a fundamental tool for web developers when it comes to styling the borders of elements. It offers a wide range of styles, allowing you to tailor the appearance of the right border to match the design of your website. Whether you need a subtle dotted line or a bold solid border, this property provides the flexibility you need to create visually appealing layouts.