Search code examples
htmlcssflexboxwidthborder

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

Solution

  • just add border radius in anchor tag too

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