maintain rounded corner when resizing div

Question

I have a layout with a div which has rounded corners filling the whole screen (to get the look and feel of some member or credit card). So in a simplified way it's just

.card {
    border: 1px solid black;
    border-radius: 100px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
}

<div class="card">
</div>

But when reducing the browser size the corners become to big obviously. If I use percent for the border roundness they get distorted. Is there any way to maintain the ratio between div and border-radius without a ton of Javascript?

Answer 1

You can use the vmax unit for the border radius which better suits the situation when the viewport/window orientation/format can both be portrait or landscape (see example in snippet below, adjust the value as needed).

Here's the description from mdn web docs

vmax represents in percentage the largest of vw and vh.

For small, large, and dynamic viewport sizes, the respective viewport-percentage units are svmax, lvmax, and dvmax. vmax represents the viewport-percentage length unit based on the browser default viewport size.

(from https://developer.mozilla.org/en-US/docs/Web/CSS/length)

.card {
    border: 1px solid black;
    border-radius: 3vmax;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
}

<div class="card">
</div>

Answer 2

You can use aspect-ratio property which I rarely use for maintaining ratio around the boxes but I don't think this is suitable for every browser just go through the browser specs and if your browser supports then give it a try or you can set the aspect ratio of any box properly by adjusting the padding for 'before' pseudo class.

Answer 3

You can use border-image to draw perfectly matched rounded corners on your box.