Swapna Kumar Panda ✨ Profile picture
| Concepts, Tips, Cheat Sheets, Questions | DSA, JS, React, SQL/NoSQL, WebDev | Access all my Tweets 👉 https://t.co/jRpP9mOd1g |

Nov 25, 2021, 10 tweets

💛 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

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling