Thread by @swapnakpanda

💛 CSS Property: border-radius 💛
.
.
↓↓↓↓↓↓↓↓↓↓

Let's learn about "border-radius" through illustrations.

Topics are,

1️⃣ Introduction
2️⃣ How to define?
2️⃣.1️⃣ One/Two/Three/Four Values
2️⃣.2️⃣ Percentage Value
2️⃣.3️⃣ Horizontal and Vertical Radius
3️⃣ Other Related Properties
4️⃣ Shapes using border-radius
5️⃣ Conclusion

1️⃣ Introduction

2️⃣ How to define?

2️⃣.1️⃣ One/Two/Three/Four Values

2️⃣.2️⃣ Percentage Value

2️⃣.3️⃣ Horizontal and Vertical Radius

3️⃣ Other Related Properties

border-radius is the shorthand property for 4 other CSS properties.

✪ border-top-left-radius
✪ border-top-right-radius
✪ border-bottom-right-radius
✪ border-bottom-left-radius

4️⃣ Shapes using border-radius

Let's draw various shapes in CSS using border-radius property.

✪ Circle
✪ Ellipse
✪ Blobs

5️⃣ Conclusion