Skip to content
loading...

CSS Quickies: border-radius

Michael "lampe" Lazarski on June 30, 2019

What is CSS Quickes? I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?" In "CSS Quickies"... [Read Full]
markdown guide
 

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 😅

 
 
 

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:
stackoverflow.com/questions/299664...

 

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 :)

code of conduct - report abuse