<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))
      )
  );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.