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>