Css border radius by unknown element size

Question

If I set border-radius: 100000pxto an element, it will be the perfect radius. If I install border-radius: 100%, I get a completely different result.

.test {
  background: red;
  width: 150px;
  height: 50px;
}

.border1 {
  border-radius: 10000px;
}

.border2 {
  border-radius: 100%;
}

Correct
<div class="test border1"></div><br>
Weird
<div class="test border2"></div>

Run codeHide result

Is there a way to use another block to get the same result as 10000px? My item size may not be known.

Answer 1

You can use a block of length vh for the same result

.border2 {
  border-radius: 100vh;
}

Answer 2

Correctly said Cenk YAGMUR, but more than 50% of the height does not accept border-radus. border-radius is more than 50% of the minimum (width, height) meaning.

.border2 {
  border-radius: 50vh;
}

Answer 3

?

border-radius: 50% 50% 50% 50%;

, , .

, , Moz Border-radius generator