Как скруглить углы в абзаце при переносе текста на новую строку?

Question

[weranda]

Приветствую.
Есть абзац, внутри абзаца выделен цветом текст, у выделения есть скругления углов, но при переносе на новые строки скругления не у крайних элементов выделяемой части отсутствуют. Это можно как-то поправить и сделать так, чтобы у веделения в начале и в конце перенесенной промежуточной части строки было скругление?
Пока это выглядит так (codepen):

Answer 1

[RAX7]

Comments

[weranda]

Это вообще что такое? Что это было? Могли бы объяснить что тут вообще происходит? Это я о вашем примере. Смотрю и не понимаю.

[RAX7]

Берем свойство box-decoration-break и рисуем скругленные углы на градиентах.
4 окружности по углам - радиальным градиентом, 2 линии - линейным градиентом.

spoiler

По ссылке выше есть более простой вариант с border-radius, так что можно так не заморачиваться.

Answer 2

[Павел Загайнов]

display: inline-block подойдет для span?

Comments

[weranda]

Нет, не подойдет. Если задать это правило, тогда при переносе на новую струку этот блок превратиться в отдельный блок и не будет выделения в строке. Будет вот так:

[Павел Загайнов]

weranda, ну, тогда в css решения нет