Как сверстать этот элемент?

Нужно сверстать таким образом, чтобы при переносе строки, округление было со всех краев, а не только в конце и начале строки. Предсказать как строка будет переносится практически невозможно, не писать же брекпоинт на каждые 10 пикселей. Есть ли какое решение?

https://codepen.io/efremandre/pen/NWJqeye?editors=1100

сейчас вот так и если экран станет меньше, строка сломается в другом месте.

Дополнительно:

https://developer.mozilla.org/.../box-decoration-break

.tobuy-shance__title_accent {   box-decoration-break: clone;   -webkit-box-decoration-break: clone; }

Поддержка в целом неплохая, но с префиксом. https://caniuse.com/css-boxdecorationbreak

• шикарно, то что нужно и даже в мобильном сафари работает)

Попробуйте классу tobuy-shance__title_accent задать бэкграунд не цветом а картинкой. Картинка розового цвета с радиусом. Задайте длинну и background-position:; 100% 100%; и background-size: 100% 100%; Почему строка сломается? Задавать надо не в px а %. А если в коце сломается то вручную подгонять, я думаю в конце будет не много правок при помощи @media. Или же действительно каждой букве задайте span и соответсвенно border-radius (для каждой буквы). Задайте общий бэкграунд. И если строка сломается, то конец и начало, сломанного места будут с радиусом, Уж буква никак не сломается пополам. Только задавайте общий бэкграунд с учётом радиуса. Чтоб общий не перекрывал радиус. Или попробуйте через js. При помощи медиа запросов.

<style>.tobuy-shance__title_accent { height: 40px; background-color: yellow; width: 500px; display: block; border: 1px solid #000; }</style>  <span class="tobuy-shance__title_accent"></span>  <script> function titleAccent(x) { var title = document.querySelector('.tobuy-shance__title_accent'); if (x.matches) { // если размер экрана больше 1000px title.style.cssText = 'border-radius: 60px;';}  else { // если размер экрана меньше 1000px // здесь я умышленно указал radius 0 чтоб вы убелись что оно работает // если вместо border-radius: 0px; написать border-radius: 60px; то при лбюом размере экрана будет border-radius: 60px title.style.cssText = 'border-radius: 0px;';}}  var x = window.matchMedia("(min-width: 1000px)") titleAccent(x); x.addListener(titleAccent);</script>

• Тоже как вариант. Спасибо за ответ)
• тут в js есть неточность. Если поставить меньше чем 1000, допустим 900, работать не будет, не пойму почему. Но тебя это не должно волновать, т.к. 1000 лля твоего вопроса в самый раз. Я напишу потом без этой ошибки, следи за коментами если есть желание.
• В этой строке лучше написать иначе, так будет ещё надёжней. Вот это

  var title = document.querySelector('.tobuy-shance__title_accent');

  var title = document.querySelector('.tobuy-shance__title_accent');

  замени на var title = document.getElementById('accent'); Чтобы скрипт обрабатывал не класс а id. Назначь id спану. Я написал accent, придумай своё.

• исправь на это, тут всё работает. Задай спану id и замени на это.

  <script> function titleAccent(x) { if (x.matches) { // если размер экрана больше 1000px document.all.accent.style.borderRadius = "60px";} else { // если размер экрана меньше 1000px // здесь я умышленно указал radius 0 чтоб вы убелись что оно работает // если вместо border-radius: 0px; написать border-radius: 60px; то при лбюом размере экрана будет border-radius: 60px document.all.accent.style.borderRadius = "0px";}} var x = window.matchMedia("(min-width: 1000px)") titleAccent(x); x.addListener(titleAccent);</script>

  <script> function titleAccent(x) { if (x.matches) { // если размер экрана больше 1000px document.all.accent.style.borderRadius = "60px";} else { // если размер экрана меньше 1000px // здесь я умышленно указал radius 0 чтоб вы убелись что оно работает // если вместо border-radius: 0px; написать border-radius: 60px; то при лбюом размере экрана будет border-radius: 60px document.all.accent.style.borderRadius = "0px";}} var x = window.matchMedia("(min-width: 1000px)") titleAccent(x); x.addListener(titleAccent);</script>

  Комментарии в скипте мешают. Без них.

  <script>function titleAccent(x) { if (x.matches) {document.all.accent.style.borderRadius = "60px";} else {document.all.accent.style.borderRadius = "0px";}} var x = window.matchMedia("(min-width: 1000px)") titleAccent(x); x.addListener(titleAccent);</script>

  <script>function titleAccent(x) { if (x.matches) {document.all.accent.style.borderRadius = "60px";} else {document.all.accent.style.borderRadius = "0px";}} var x = window.matchMedia("(min-width: 1000px)") titleAccent(x); x.addListener(titleAccent);</script>

  Где borderRadius = "0px" замени на 60px.