Question 175779 in Html Question posted in
Some basic documentation can be found here.

What’s the diff b/w 50% & 70px border-radius for a 140px width element in CSS?

I have encountered a peculiar visual difference when setting the border-radius property in CSS. In CSS battle first challenge target #8, I have a element with a fixed width of 140px. The border-bottom-left-radius is set to 50%, while the border-bottom-right-radius is set to 70px. Logically, 50% should be equal to 70px in this case since the width of the element is known. However, when rendered, there is a small distinction between the two corner radii, I want to know why this happen.
this is the code you can put it in: " https://cssbattle.dev/play/8 "turn on Diff to check the difference.

<div a></div>
    <style>
      div {
        position:fixed;
        left:130px;
        width: 140px;
        border-bottom-left-radius:50%;
        border-bottom-right-radius:70px;
        height: 150px;
        background: #dd6b4d;
       }
      div[a]{
        top:100px;  
      }

I have tried asking ChatGPT, and it suggested that the issue might be due to browser rendering. However, I tested it on both Chrome and Bing browsers and encountered the same problem.

Tags:

2

Answers


  1. 0

    Logically, 50% should be equal to 70px in this case since the width of the element is known.

    Your mistake here is in assuming that this was dependent only on the width – but it isn’t.

    With border-bottom-left-radius (and the others as well), you are actually specifying two radiuses, one for the semi-major and one for the semi-minor axes of the ellipse.

    https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius#values:

    Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.

    You specified only one value here, 50% – so you are setting a border radius of 50% of the width in one of the axis directions, and 50% of the height in the other.

    Your element is 140px wide, and 150px high. And 50% of 140, are a different value than 50% of 150.

    So of course you get a different curve here, than you would with 70px – with that, you are setting the same radius for both axes.

    Login or Signup to reply.
  2. 0

    Because border-YYY-XXX-radius defines an elliptical corner and actually takes two values. A value of 50% is equivalent to 50% 50% which means 50% of the width, 50% of the height.
    You could have defined it to be 50% 70px and you’d have gotten the expected result.

    div {
  position:fixed;
  left:130px;
  width: 140px;
  border-bottom-left-radius: 50% 70px;
  border-bottom-right-radius:70px;
  height: 180px;
  background: #dd6b4d;
 }
div[a]{
  top:100px;  
} 
    <div a></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search