<div class="card">border-radius</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
background-color: #557;
display: grid;
place-content: center;
}
.card {
min-width: 300px;
max-width: 50vw;
aspect-ratio: 21 / 9;
background-color: #09f;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-shadow: 1px 1px 1px rgb(0 0 0 / 0.5);
}
.card {
--min-border-radius: 10;
--max-border-radius: 24;
--min-viewport-width: 320;
--max-viewport-width: 1024;
font-size: calc(
var(--min-border-radius) * 1px +
(var(--max-border-radius) - var(--min-border-radius)) *
(
(100vw - var(--min-viewport-width) * 1px) /
(var(--max-viewport-width) - var(--min-viewport-width))
)
);
border-radius: calc(
var(--min-border-radius) * 1px +
(var(--max-border-radius) - var(--min-border-radius)) *
(
(100vw - var(--min-viewport-width) * 1px) /
(var(--max-viewport-width) - var(--min-viewport-width))
)
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.