Css border radius by unknown element size

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.

+4
source share
3 answers

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

.border2 {
  border-radius: 100vh;
}
+4
source

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;
}
+2
source

?

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

, , .

, , Moz Border-radius generator

-2
source

Source: https://habr.com/ru/post/1691607/


All Articles