CSS Make a rounded corner be a circle with percentage radius

Question

I want to add rounded corners to my images. They are Bootstrap 4 responsive images (With the class img-fluid), so I don't want to use something like border-radius=15px, because if the images become very small (on a small viewport), the rounded off corners will take up most of the image, and when the images are very large, the rounding will be barely notiecable.

I can use border-radius=15%;, but if my image is not a square, the rounded corners are elliptical instead of circular. I can fix this with border-radius=15%/10%;, but then I have to adjust this ratio to match the aspect ratio of each individual image.

Is there a way to round the corners of a Bootstrap 4 responsive image, such that the rounding is always circular, and always the same ratio of the image width or height, regardless of the aspect ratio of the image?

I would prefer to do this with only CSS. I could do it using Javascript, but I will only really have three different aspect ratios of image in this application, so it would be easier to just create three different classes.

Answer 1

A hacky solution, but we can use CSS3 vw or viewport width to achieve something close to what you want. border-radius:5vw; will reduce or increase the % based on the total width of the viewport.

The size of the image wont matter just the viewport. But you can get pretty good results none the less.

div{
  background-color:red;
  width:50%;
  height:100px;
  border-radius:5vw;
}

<div></div>

I suggest you just use JS for this.