Меняй значение border-radius в зависимости от размера контейнера или экрана — всего одной строкой кода.

Условный Border Radius на CSS

.box {
  border-radius: calc(sign(100cqi - 100%) * 2rem);
}

По умолчанию значение равно 2rem. Когда элемент занимает всю ширину (его ширина равна ширине контейнера), радиус скругления становится 0.
Если контейнер не задан, 100cqi автоматически подставит 100vw (ширину экрана).

Попробуй менять размер экрана или контейнера в демке , чтобы увидеть, как это работает:

@WebDev_Plus