📌 Introduction

The border-radius property in CSS allows you to create rounded corners on elements. It works on all elements with a visible rectangular box — including divs, buttons, images, inputs, and more. With border-radius, you can design smooth UI components, circles, pills, cards, and modern layouts. ✨

🎯 Why Use border-radius?

✨ Syntax

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

🧩 Ways to Use border-radius

1. Single Value (All Corners)

.box {
  border-radius: 15px;
}

2. Two Values (Opposite Corners)

Applies first value to top-left & bottom-right, second value to top-right & bottom-left.

.box {
  border-radius: 20px 40px;
}

3. Four Values (Each Corner)

/* TL | TR | BR | BL */
.box {
  border-radius: 10px 20px 30px 40px;
}

4. Slash Syntax (Elliptical Corners)

The slash / divides horizontal and vertical radii.border-radius: [horizontal-radii] / [vertical-radii];

.box {
  border-radius: 40px / 10px;
}

5. Per-Corner Properties

.box {
  border-top-left-radius: 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 10px;
}

🟢 Creating Shapes With border-radius

1. Perfect Circle

.circle {
  width: 150px;
  height: 150px;
  background: #4da3ff;
  border-radius: 50%;
}

2. Pill (Rounded Button)

.pill {
  padding: 12px 30px;
  border-radius: 9999px;
}

3. Oval

.oval {
  width: 200px;
  height: 100px;
  background: #ffadad;
  border-radius: 50%;
}

4. Speech Bubble

.bubble {
  border-radius: 20px;
  position: relative;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: #ddd transparent transparent transparent;
}

📊 Summary Table

🖼️ Visual Demo

🎉 Conclusion

The border-radius property is one of the simplest but most powerful CSS tools. From soft corner cards to circles and pills, it helps you design smooth, modern interfaces. Master radius combinations and elliptical values to unlock advanced design patterns. 🚀