CODEWITHSUNDEEP
css
Jens Törnell
Jens Törnell

Reputation: 24798

css border radius on unknown element size

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.

Upvotes: 5

Views: 2280

Answers (3)

StuffToLearn
StuffToLearn

Reputation: 7

Perfect radius would be a circle for you?

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

This would give you a circle if your element is even, or a square to begin with.

Here is a fun tool that illustrates the angles on how it works Moz Border-radius generator

Upvotes: -3

Raz Galstyan
Raz Galstyan

Reputation: 325

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;
}

Upvotes: 3

Cenk YAGMUR
Cenk YAGMUR

Reputation: 3451

You can use vh length unit for same result

.border2 {
  border-radius: 100vh;
}

Upvotes: 7

Related Questions