Swapna Kumar Panda ✨ Profile picture
Jan 23 β€’ 12 tweets β€’ 4 min read
πŸ’› CSS: border-radius

Explained with Classic Illustrations
πŸ“‹ Table of Contents

➊ Introduction
βž‹ How to specify?
βž‹.βž€ One/Two/Three/Four Values
βž‹.➁ Percentage Value
βž‹.βž‚ Horizontal and Vertical Radius
➌ Other Related Properties
➍ Shapes using border-radius
➎ Conclusion
➊ Introduction
βž‹ How to specify?
βž‹.βž€ One/Two/Three/Four Values
βž‹.➁ Percentage Value
βž‹.βž‚ Horizontal and Vertical Radius
➌ 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
➍ Shapes using border-radius

A lot of different types of shapes can be made in CSS using border-radius property.

βœͺ Circle
βœͺ Ellipse
βœͺ Blobs

Let's draw.
➎ Conclusion
⚠️ Repost ⚠️

β¬– This is an original work and, was posted in Twitter previously in July 2021.

⬘ I had ~100 followers that time. And, this gave me recognition.

β¬— I have reposted it during November, 2021

⬙ If you liked these works, feel others might learn from it, do support.
End of 🧡

If you are interested in learning through illustrations, I am making a bunch on topics of HTML, CSS, JavaScript, SQL, DSA. To never miss any, follow me {@swapnakpanda}

Till we meet again, πŸ‘‹

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Swapna Kumar Panda ✨

Swapna Kumar Panda ✨ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @swapnakpanda

Jan 22
πŸ“š Books you must read for

πŸ›  DSA
πŸ›’ SQL
🌐 JavaScript

⇩
β¬– Books were and still are the most important medium for our knowledge growth.

⬘ Do you love to read books? How about for technical subjects? If no, I would suggest you should.

β¬— Here, I will list few important ones. If you want to add any, feel free.
πŸ›  DSA

➊ Grokking Algorithms
✍️ Aditya Bhargava

βž‹ Introduction to Algorithms
✍️ Thomas H. Cormen βŠ• Charles E. Leiserson βŠ• Ronald L. Rivest βŠ• Clifford Stein

➌ Introduction to Algorithms
✍️ Udi Manber
Read 9 tweets
Jan 21
There may be a "Hole" in your Array

πŸŸͺπŸŸͺπŸŸͺπŸ•³πŸŸͺπŸŸͺ

A JavaScript 🧡
➊ What is a hole?

β¬’ Holes are indices β€œinside” an Array that have no associated element.

⬔ An array with at least a single hole in it is called a "Sparse Array".

⬓ An array without any hole is called a "Dense Array".
βž‹ How to detect a hole?

Check if

⬙ 0 ≀ index < Array's length
⬘ index is not in the array

Example:

To check if there is a hole at index "2" in "arr" whose length is 5

β‡₯ !(2 in arr)
Read 13 tweets
Jan 19
πŸ’« 100 Inspiring Accounts

If their tweets appeared in your timeline, you would definitely learn something new.

They are experts in

πŸ™ Web Development
πŸŽ‘ UI/UX
πŸ‘©β€πŸ’» Programming
πŸ›’ Database
πŸ›  System Design
πŸ”© Machine Learning
🎯 DSA
β›“ Blockchain
🌐 Web3
Read 8 tweets
Jan 18
How is "Divide by Zero" handled in JavaScript?

🧡
➊ Why is "Divide by Zero" special?

Let's say

a Γ· 0 = y
β‡’ a = y Γ— 0
β‡’ a = 0

It means

⬔ a non-zero number can never be divided by zero

⬕ as any number multiplied by zero is zero, 0 Γ· 0 is also indeterminate
βž‹ How do programming languages handle it?

❑ As we saw above, division by zero in every scenario is indeterminate.

❒ Many programming languages consider it a special case and throws error/exception at runtime.

❑ To handle, we need to catch the error.
Read 6 tweets
Jan 16
What is < onclick=" return false;" > in HTML?

⇩
➊ Why is it used?

❑ Events automatically lead to certain actions performed by the browser.

❒ In some cases, we may not want default action to be performed.

❑ "return false" triggers browser to prevent taking default action.
βž‹ Let's break it down

βœ› onclick
It's an HTML attribute.
It's being used to set inline event handlers.

βœ› =""
The code written inside "" should be valid JS code.

βœ› return false
Returning false from an inline event handler
Read 8 tweets
Jan 16
πŸ’™ 10K+ Followers
πŸ“… 15-JAN

1K ⇨ First 3 months
10K ⇨ Next 3 months

Though I have been sharing the best possible learning contents, the kind of love and support I have received from you all is beyond my words.

You will receive even better contents, that's my promise

↓
To never pollute my timeline, I rarely share any non-educational tweets.

Today I thought of sharing few single-liners that I wrote before but never able to post them.

Please read and share your views.
Just because a 12 yo doing Web Dev, don't mistaken it as a child's stuff.
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(