CSS border-top-right-radius Property

CSS border-top-right-radius Property

The border-top-right-radius property in CSS is used to round the top-right corner of an element. It allows you to control the curvature of the top-right corner of an element, making it possible to create rounded corners on one specific corner of a box.

1. Syntax

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

Value	Description
length	Specifies the radius of the top-right corner, such as px, em, rem, etc.
%	Specifies the radius as a percentage of the element's width or height.
inherit	Inherits the top-right radius from the parent element.

2. Example – Using border-top-right-radius

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border-top-right-radius: 20px;
}

<div>
  This div has a rounded top-right corner with a radius of 20px.
</div>

✅ The top-right corner of the <div> will have a radius of 20px, giving it a rounded appearance.

3. Example – Using Percentages for border-top-right-radius

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border-top-right-radius: 50%;
}

✅ The top-right corner of the <div> will have a rounded appearance, and the radius will be 50% of the element's height, creating a more elliptical corner.

4. Example – Rounding Multiple Corners

You can combine multiple border-radius properties to round several corners of an element. For example, rounding only the top-right and bottom-left corners:

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

✅ The top-right and bottom-left corners of the <div> will have 20px rounded corners, while the other two corners remain square.

5. Best Practices

✔ Use border-top-right-radius when you want to apply rounded corners only to the top-right corner of an element.
✔ For symmetrical rounded corners on all corners, use the shorthand border-radius property instead.
✔ For responsive designs, consider using percentages for the border-top-right-radius to maintain proportional rounding, especially when the element's size may change.