Any good explanations on border-radius?

HTML-CSS
1

How are the corners being rounded when you apply a value to border-radius:? How do you know what value to add to border-radius if you want the corners to look a certain way? How is the code able to calculate how much to round the edges?

For example, can someone better explain how I would know how image would look like if I added the following prior to testing it.

border-radius: 10px vs. border-radius: 50px
border-radius: 10% vs. border-radius: 50%

What if I wanted my corners to look more circular vs. elliptical? How would I know which values to use?

2

Estimation based on experience I guess.

100% is a circle. So the closet you get to 100% the more circular it looks than elliptical; and vice versa.

I don’t think it’s the code that’s able to calculate it but rather the browser. You specify rules for the browser to follow in your code.
If you’re using pixels it’s quite easy. There is nothing to derive the values from. But if you’re using percent, the browser will figure out how to turn that value into pixels taking into account the other values you specified for that specific element.

1 Like
3

@kirubiel Thank you for the explanations! So you pretty much would test various px or percentages and then see what you get? There are no super standard rules other than border-radius: 50%; is a circle?

4

Yeah exactly. Just experiment with the values. And of course, it’s not just in pixels or in percent. You can use em, cm, mm, and other values.

Yup! Thank God CSS is not rocket science. Else we’d all be doomed. The simplest language you might ever learn. And no 100% is a circle not 50%.

1 Like
5

@kirubiel Good, because I thought there might have been some sort of mathematical logic to the values that I wasn’t understanding.

The “Make Circular Images with a border-radius” section of the Basic CSS section instructed us to add border-radius: 50%; to create circular images. However, I think that the image was still circular if you added any value from 50% to 100%.

1 Like
6

Yeah there’s a difference between circular and circle I guess. So in that case yes 50 to 100% works.

7