Create templates to quickly answer FAQs or store snippets for re-use.
A useful yet useless thing you can do to get the roundest corner.
Instead of border-radius: 9999em;
Use border-radius: 9e9em;
The result is 9 to the power of 9. So that's a big number 😅
Hahaha can't cut yourself on this roundness.
Haha yeah, that is also a solution!
I feel like you did a good job showing examples as well as defining the radius, but I don't know from reading why we get the shapes we do from the radius. How does this number get applied to the corners of our elements? Why does 50% on a square element, turn it into a circle? I'm not trying to be critical of your post, these were just answers I was hoping to find as I read through.
Thank. I was thinking of integrating it!
There is this wonderful StackOverflow answer how it is calculated:
Thanks - a handy reminder! I keep on meaning to try out some more elaborate border-radius's (did that need the extra 's'...I'm not sure) in a project and you reminded me!
Fancy border radius is a handy site for experimenting with border-radius
Fancy border-radius is a great way to create crazy shapes :)
This is a great series, Michael, thanks for writing it. I've bookmarked it for future reference :)
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.