Question 293592 in CSS Question posted in
Some basic documentation can be found here.

Css – maintain rounded corner when resizing div

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    You could use the vmax unit (see below, adjust value as needed) which better suits the situation that the viewport/window can both be portrait or landscape.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search