CSS border-top-right-radius Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-top-right-radius property in CSS is used to round the top-right corner of an element's border.

This property allows you to create visually appealing elements by applying a curved edge to the top-right corner of elements like buttons, boxes, or images. The radius of the curve can be adjusted to achieve various styles, ranging from subtle rounding to a full circle.

💡 Syntax

The syntax for the border-top-right-radius property is simple and flexible. You can specify the radius using different units such as pixels (px), percentages (%), or em units.

Syntax

Copied

element {
  border-top-right-radius: value;
}

value: Specifies the radius of the top-right corner. It can be a length (e.g., 10px) or a percentage (e.g., 50%).

🎛️ Default Value

The default value of the border-top-right-radius property is 0. This means that by default, there is no rounding applied to the top-right corner of an element.

🏠 Property Values

Value	Description
length	A length value, such as 10px or 1em, that defines the radius of the corner.
percentage	A percentage value, such as 50%, which defines the radius relative to the element's width or height.
initial	Sets the property to its default value (0).
inherit	Inherits the border-top-right-radius value from its parent element.

📄 Example

In this example, we'll apply a border-top-right-radius to a box element, rounding the top-right corner by 20 pixels.

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

🖥️ Browser Compatibility

The border-top-right-radius property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. As with any CSS property, it is advisable to test your design across different browsers to ensure consistent rendering.

🎉 Conclusion

The border-top-right-radius property is a useful tool for adding subtle or pronounced rounding to the top-right corner of an element's border.

Whether you're designing buttons, containers, or other UI elements, this property allows you to enhance the visual appeal of your designs with ease. Experiment with different radius values to find the perfect fit for your web projects.