Tag border-top-right-radius

Rounded corners are a subtle yet effective way to add elegance and softness to web designs. The border-top-right-radius property in CSS specifically controls the rounding of the top-right corner of an element, letting you tailor your layout with precision and style.

🧾 What is border-top-right-radius?

border-top-right-radius sets the curvature of the top-right corner of an element’s box. It replaces the default sharp 90-degree angle with a smooth, rounded curve.

🧬 Syntax

selector {
  border-top-right-radius: <length> | <percentage>;
}

Value options:

  • <length> — e.g., 10px, 1em, 0.5rem — defines the radius size.
  • <percentage> — e.g., 50% — relative to the element’s dimensions.
  • Two values allowed (horizontal radius and vertical radius):
selector {
  border-top-right-radius: 15px 30px;
}

🎯 Examples

1. Rounded top-right corner with fixed length

.card {
  border-top-right-radius: 20px;
  border: 2px solid #444;
}

Rounds the top-right corner by 20 pixels for a subtle effect.

2. Elliptical radius with two values

.box {
  border-top-right-radius: 25px 50px;
}

Creates an elliptical curve where horizontal radius is 25px and vertical radius is 50px, giving a unique shape.

3. Percentage-based radius for responsive design

.avatar {
  border-top-right-radius: 50%;
}

Makes the corner very rounded, ideal for circular or pill-shaped elements.

🔍 How It Works

  • Radius defines the size of the curve applied to the corner.
  • When two values are provided, the first controls horizontal radius and the second vertical radius.
  • Percentage values are calculated relative to the box dimensions (width for horizontal, height for vertical).
  • Works in conjunction with other corner radius properties for fully customized shapes.

🛠️ Tips for Use

  • Combine with border-top-left-radius, border-bottom-left-radius, and border-bottom-right-radius for complete corner styling.
  • Rounded corners improve the look of buttons, cards, modals, and images.
  • Use subtle radii for a modern minimalist style or larger values for organic, friendly shapes.
  • Avoid overly large radii on small elements, which can distort the shape.

✅ Browser Support

Supported widely across all modern browsers, including:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

🔚 Conclusion

The CSS border-top-right-radius property is a simple yet powerful way to add smooth, rounded curves to the top-right corner of any element. It helps create visually appealing, user-friendly designs with minimal effort.