'Using CSS border-radius (rounded corners), how can we prevent the rounded corners from disappearing if the image is scaled down (max width/height)?

Consider this scenario:

  1. An image is centered both horizontally and vertically using a flex box
  2. The image has a CSS border-radius configured (rounded corners)
  3. The image is inside an <a> tag
  4. The image is configured using CSS to take up no more than 50% of the horizontal or vertical space, and to shrink down proportionally if needed
<body style="margin:0;overflow:hidden;width:100%;height:100%;position:fixed;text-align:center;background-color:green">
  <div style="flex-direction:column;justify-content:center;align-items:center;display:flex;height:100vh;width:100%">
    <a href="https://google.com/" style="max-width:50%;max-height:50%">
    <img src="https://i.imgur.com/CHHOCY5.png" style="border-radius:20%;object-fit:scale-down;max-height:100%;max-width:100%;width:200px;height:200px">
    </a>
  </div>
</body>

Example: https://jsfiddle.net/c8h0L7o1/

Normal operation (ample space available):

Normal operation (ample space available):

If available height and width are both reduced in roughly equal proportion, the rounded corners are retained as the image shrinks:

If available height and width are both reduced in roughly equal proportion, the rounded corners are retained

However if horizontal space is constrained but vertical space is not, or vice versa, the rounded corners are lost:

Vertical space constraint:

vertical constraint

Horizontal space constraint:

horizontal constraint

How can the rounded corners be retained in these scenarios?

The problem happens regardless if the border-radius is expressed in pixels or percent

Behavior has been verified in both Firefox and Chrome

htmlcssflexboxwidthborder


Solution 1:[1]

Delete width:200px; height: 200px; from img tag

Solution 2:[2]

just add border radius in anchor tag too

<a style="border-radius:20%" > img </a>

Solution 3:[3]

add class for img:

Then try to edit by CSS code

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Antonio Lozano
Solution 2 UNRIVALLEDKING
Solution 3 Raju Ahmed

Related Questions