CSS border-bottom-right-radius Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 15 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-bottom-right-radius property in CSS is used to define the radius of the bottom-right corner of an element. It allows for rounded corners, enhancing the design and visual appeal of elements by softening sharp edges.

This property is particularly useful for creating smooth, curved corners on boxes, containers, and other block-level elements.

💡 Syntax

The syntax for the border-bottom-right-radius property is as follows:

Syntax

Copied

element {
  border-bottom-right-radius: radius;
}

Here, radius specifies the radius of the bottom-right corner. It can be expressed in various units, including pixels (px), em units (em), or percentages (%).

🎛️ Default Value

The default value of the border-bottom-right-radius property is 0, meaning the bottom-right corner will be a sharp corner if no radius is applied.

🏠 Property Values

Value	Description
length	A specific length value such as 10px, 2em, or 0.5rem. This determines the radius of the corner.
percentage	A percentage value relative to the element's width or height, such as 50%. This is useful for creating circular shapes.
inherit	Inherits the value from the parent element.
initial	Sets the property to its default value (0).
unset	Resets the property to its natural value depending on its inherited or initial state.

📄 Example 1: Basic Usage

In this example, we will apply a 20-pixel radius to the bottom-right corner of a box.

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-bottom-right-radius Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      border-bottom-right-radius: 20px;
    }
  </style>
</head>
<body>
  <h1>Box with Rounded Bottom-Right Corner</h1>
  <div class="box"></div>
</body>
</html>

📄 Example 2: Using Percentage

In this example, we will use a percentage value to create a circular shape for the bottom-right corner.

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-bottom-right-radius Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: lightcoral;
      border-bottom-right-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>Box with Circular Bottom-Right Corner</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The border-bottom-right-radius property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. This property is well-supported and should work consistently across different platforms and devices.

🎉 Conclusion

The border-bottom-right-radius property is a useful tool for web designers and developers looking to create rounded corners on the bottom-right side of elements.

By adjusting the radius, you can achieve various visual effects and enhance the overall design of your web pages. Experiment with different values and combinations to see how this property can be applied to your design projects.