🌿 CSS border-top-left-radius: Softening Corners with Style

Rounded corners are a simple but powerful way to make web elements feel more approachable and modern. The border-top-left-radius property in CSS allows you to round the top-left corner of any element with precision, adding that smooth, polished finish to your design.

---

🧾 What is border-top-left-radius?

border-top-left-radius defines the curvature of the top-left corner of a box. By setting a radius, you change the sharp 90-degree angle into a rounded curve.

---

🧬 Syntax

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

Values:

• <length> — e.g., 10px, 1em, 0.5rem — defines the horizontal and vertical radius in fixed units.
• <percentage> — e.g., 50% — makes the curve relative to the element’s size.
• Two values can be used (horizontal radius and vertical radius):

selector {
  border-top-left-radius: 10px 20px;
}

---

🎯 Examples

1. Simple fixed-radius rounding

.box {
  border-top-left-radius: 15px;
  border: 2px solid #333;
}

Rounds the top-left corner with a 15px curve.

---

2. Elliptical radius (different horizontal and vertical radii)

.card {
  border-top-left-radius: 20px 40px;
}

Creates an elliptical shape with a wider vertical curve.

---

3. Percentage-based radius

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

Makes the corner extremely rounded, sometimes creating a “pill” or semi-circle effect.

---

🔍 How It Works

• The radius controls the size of the curve on the corner.
• When percentages are used, they’re relative to the box’s corresponding dimension (width for horizontal radius, height for vertical radius).
• If you use two values, the first is horizontal radius, the second is vertical radius.
• Can be combined with other corner radius properties for custom shapes.

---

🛠️ Practical Tips

• Use border-top-left-radius alongside the other three corner radius properties (border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) to customize each corner.
• Rounded corners soften the look of buttons, cards, modals, and images.
• Use subtle radius values (5-15px) for modern, minimal designs.
• Larger or elliptical radii create unique, organic shapes.

---

✅ Browser Support

border-top-left-radius enjoys full support on all modern browsers:

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

---

🔚 Conclusion

The CSS border-top-left-radius property is your go-to for adding elegant, rounded curves to the top-left corner of elements. It’s simple yet impactful for creating friendly, polished UI components.

---