loading...
Cover image for CSS Quickies: border-radius

CSS Quickies: border-radius

lampewebdev profile image Michael "lampe" Lazarski Updated on ・3 min read

What is CSS Quickes?

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in deep. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments. I answer all questions.

I'm also live streaming while coding on twitch.tv. If you want to talk to me directly!

The basics

Let's talk about border-radius.

The short answer is: you can give HTML elements round corners, and you can only see this if the background has a different color then the HTML Element or if the HTML element has a border color.

The most basic syntax is:

.radius {
  border-radius: 10px;
}

It is time to understand what radius means.
So you have to imagine a circle. Every circle has a radius. The Radius is the length from the middle to any border point of the circle.
Alt text of image

Now that you know what a radius is. Imagine that you cut out the corner along the edges of the circle of your HTML element! That's it! Just a Circle where someone cuts along with scissors.

Getting deeper

There are different ways how you can use it.

.border{
    /* top-left-and-bottom-right | top-right-and-bottom-left */
    border-radius: 10px 10px;

    /* top-left | top-right-and-bottom-left | bottom-right */
    border-radius: 10px 10px 10px;

    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 10px 10px 10px 10px;
}

You see that we can set every corner what give is good flexability to create fancy websites.

Supported values

You can use px, em and % values.

Second radius

There is also an advanced use of border-radius where you can define a second radius. Think about it like you would have now two circles for every corner! And you can set them independent.

.radius{
    border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
    /* you can read this like this: */
    border-radius: 
       top-left-up top-right-up bottom-right-down bottom left-down /
       top-left-left top-right-right bottom-right-right bottom-left-left
}

Here are some examples:

Creating round elements

Border-radius is also used to create round elements.

That's it! There is not more to learn about border-radius.
This is straightforward; you have to have an element that has the same width and height and set border-radius to 50%.

Finale thoughts

This is a new format I'm trying out.
How do you like it?
What did you miss?
Please comment down below!

Resources

Thanks for reading!

Say Hallo! Instagram | Twitter | LinkedIn | Medium

Discussion

pic
Editor guide
Collapse
adam_cyclones profile image
Adam Crockett

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 😅

Collapse
awwsmm profile image
Andrew (he/him)

MAXIMUM ROUND

Collapse
adam_cyclones profile image
Adam Crockett

Hahaha can't cut yourself on this roundness.

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Haha yeah, that is also a solution!

Collapse
tuxhedoh profile image
Tuxhedoh

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.

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Thank. I was thinking of integrating it!

There is this wonderful StackOverflow answer how it is calculated:
stackoverflow.com/questions/299664...

Collapse
paul_duvall profile image
Paul Duvall

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

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

Fancy border-radius is a great way to create crazy shapes :)

Collapse
awwsmm profile image
Andrew (he/him)

This is a great series, Michael, thanks for writing it. I've bookmarked it for future reference :)