1

Although the border-radius amount of the following 2 boxes is the same, it shows different results. What is the reason of this? And how can we set it to look the same in every box. Do we have to do mathematical operations according to the size of the box? (I'm talking about why box 2 is less round.)

I know it's an optical illusion but I want it to look the same given the size of the box.

* {
  margin: 1rem;
 }

.box {
  width: 10rem;
  height: 5rem;
  background-color: black;
  border-radius: 3rem;
}

.box2 {
  width: 20rem;
  height: 10rem;
  background-color: black;
  border-radius: 3rem;
}
<div class="box"></div>
<div class="box2"></div>

The border-radius gets jagged when I do it with percentages.

    * {
  margin: 1rem;
 }

    .box {
      width: 10rem;
      height: 5rem;
      background-color: black;
      border-radius: 20%;
    }

    .box2 {
      width: 20rem;
      height: 10rem;
      background-color: black;
      border-radius: 20%;
    }
<div class="box"></div>
<div class="box2"></div>
  • In box1 you have reached the border-radius limit, when a square becomes round you cannot make it rounder. – Antonio Torres Jun 24 '21 at 11:12
  • @AntonioTorres I'm not talking about this. I'm asking why the 2nd box looks less rounded. I entered the same amount of "border-radius" as a result. How can I make every box look the same without doing the math? –  Jun 24 '21 at 11:16
  • Are you wanting the boxes to look like the first one in your snippet or the second one? It's not really an optical illusion if you think of having the shape on a piece of rubber and stretching it equally, the shape is the same, just the scale is different. – A Haworth Jun 24 '21 at 11:25
  • It is not an optical illusion, in box 1 it shows you a radius of 2.5rem because it does not have space for the 3rem, I have answered you with a solution I hope it will be worth it. – Antonio Torres Jun 24 '21 at 11:25

2 Answers2

2

You can define the border-radius in %.

* {
  margin: 1rem;
 }

.box {
  width: 10rem;
  height: 5rem;
  background-color: black;
  border-radius: 15%/30%;
}

.box2 {
  width: 20rem;
  height: 10rem;
  background-color: black;
  border-radius: 15%/30%;
}
<div class="box"></div>
<div class="box2"></div>
Pan Vi
  • 627
  • 6
  • 17
-1

You have a height of 5rem and a radius in each corner of 3rem that makes the top have a radius of 6rem, as there is no space for the 6rem, it shows you a radius of 2.5rem. If you want to keep the 3rem you have to ensure a minimum width and height.

* {
  margin: 1rem;
  min-width: 6rem;
  min-height: 6rem;
  border-radius: 3rem;

 }

.box {
  width: 10rem;
  height: 5rem;
  background-color: black;
  border-radius: 3rem;
}

.box2 {
  width: 20rem;
  height: 10rem;
  background-color: black;
  border-radius: 3rem;
}
<div class="box"></div>
<div class="box2"></div>
Antonio Torres
  • 342
  • 1
  • 8