CSS border-right-width Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-right-width property in CSS is used to set the width of the right border of an element.

This property allows you to control the thickness of the right border, enhancing the visual appearance of your elements. It is commonly used in conjunction with other border properties such as border-style and border-color to create well-defined borders around elements.

💡 Syntax

The syntax for the border-right-width property is simple. It can be applied to any element that supports borders.

Syntax

Copied

element {
  border-right-width: value;
}

🎛️ Default Value

The default value of the border-right-width property is medium, which is typically 3-4 pixels, but it can vary slightly between browsers.

🏠 Property Values

Value	Description
thin	A thin right border, typically around 1px.
medium	A medium right border, usually around 3-4px. (This is the default value.)
thick	A thick right border, generally around 5-6px.
length	A specific width defined in units like px, em, rem, etc.
inherit	Inherits the `border-right-width` value from its parent element.

📄 Example

In this example, we’ll set the right border width of a div element to 10px.

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-width Example</title>
  <style>
    div {
      border-style: solid;
      border-right-width: 10px;
      border-color: black;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Right Border Width</h1>
  <div>This div has a right border width of 10px.</div>
</body>
</html>

🖥️ Browser Compatibility

The border-right-width property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. As it is a fundamental CSS property, you can rely on it to work consistently across different platforms and devices.

🎉 Conclusion

The border-right-width property provides a simple yet effective way to control the width of the right border of an element. By adjusting this property, you can create distinct visual effects and improve the overall design of your web pages. Experiment with different values to see how this property can be used to enhance the layout of your content.