DEV Community

Cover image for CSS Quickies: border-radius
Michael "lampe" Lazarski
Michael "lampe" Lazarski

Posted on • Edited on

CSS Quickies: border-radius

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (9)

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€ • Edited

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

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

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

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