css border radius on unknown element size

Question

If I set border-radius: 100000px on an element it will a perfect radius. If I set 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>

Is there a way to use another unit to get the same result as 10000px? My element size might be unknown.

Answer 1

You can use vh length unit for same result

.border2 {
  border-radius: 100vh;
}

Answer 2

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

.border2 {
  border-radius: 50vh;
}