Morphing Border Radius

• ui
• border-radius

Output

Code

<style>
.card {
    border: 1px solid var(--color-off-white);
    background: var(--color-pastel-pink);
    padding: 3rem;
    margin-inline: auto;
}
.card--flex {
    max-width: 100%;
    border-radius: clamp(0px, calc(100cqi - 100%) * 1e5, 50px);
}
img {
    width: 100%;
    max-inline-size: 500px;
    max-block-size: 500px;
    display: block;
    object-fit: cover;
    inline-size: 100%;
}
.breakout > img {
    max-block-size: 600px;
    max-inline-size: 600px;
    max-width: 100%;
}
.dynamic-border {
    margin-inline: auto;
    border-radius: clamp(0px, calc(100cqi - 100%) * 1e5, 50px);
}
.resizable {
    resize: both;
    overflow: hidden;
    /*overflow: scroll;*/
    /*max-width: 100cqi;*/
    scrollbar-gutter: stable;
 
}
.container {
    container-type: inline-size;
}
</style>

<div class="container">
    <div class="card card--flex resizable">
        <div class="pile">
            Drag window to resize to see the border radius change to zero when touching the edge
        </div>
    </div>
</div>
<div class="container breakout">
    <div class="card card--flex resizable">
        <div class="pile">
            Drag window to resize to see the border radius change to zero when touching the edge
        </div>
    </div>
</div>
<div class="container">
      <img src="/assets/old-car.jpg" alt="old car" class="dynamic-border" />
</div>
<div class="container breakout">
      <img src="/assets/new-car.jpg" alt="new car" class="dynamic-border" />
</div>