Something about border-radius

As talked border-radius, firstly, let’s see a example about border-radius

in this case, I set border-radius as 50% 50% / 100% 100% and 100% / 50% .

As shown, I see a ellipse, a playground track, another ellipse, and a ellipse without its left/right head.

After overlap each 2 one, it’s more clear.

now you may get what’s 50% 100% means.

Actually, border-radius is a kind of shorthand of

1
2
3
4
5
6
7
8
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius (horizonal)/
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius (vertical)

it’s seems easy with border-*-radius, but what’s the horizonal or vertical means?

this image explains it.
border-radius-sh

With everything above, we can easily “create” any border radius or “corner radius”.

One special example is A Circle. Yes, set width = height and horizonal/ vertical border-radius equal then we got a circle.
for example, we can set as following:

1
2
...
border-radius: 50%;

any value greater than width _ 50% can be resolved as width _ 50%.

Wait! In the situation, it looks weird.

to figure out this, we set just one “corner” its border-radius with value but not percentage.

1
2
3
width: 240px;
height: 240px;
border-radius: 120px  0 0 0 / 120px 0 0 0

240x240

From 0 start, with adjusting the second value until 240px, do you find something? Go on, set it larger than 240px, what do you find?

It looks nothing special, the vertical value the large, it’s radius larger.

But why it seems a circle when we set the border-radius 50% or even large?

there’s two features:

  • there’s a max value, larger value equals max value(大值特性)
  • if we set a (等比例特性), we set 50% / 50%, 100% / 100% get the same result, and 50% / 100% ,150% / 300% sames.

Only thing we should focus on is it’s percentage.

Reference:
《CSS Secret》
秋月何时了，CSS3 border-radius 知多少？
MDN border-radius