Как скруглить фон текста только по краям строки с помощью CSS

Стандартное свойство border-radius применяется ко всему блоку целиком, поэтому скруглить фон только в начале первой строки и в конце последней - нетривиальная задача. Однако современные CSS-техники позволяют добиться такого эффекта без использования фоновых изображений, сохраняя текст редактируемым.

Проблема обычного border-radius

Если применить border-radius к блочному элементу (display: block), скругление появится на всех четырёх углах прямоугольника. Для многострочного текста это означает, что фон будет скруглён не только в начале и конце текста, но и на пустых углах, что выглядит неестественно.

Решение: inline-block + box-decoration-break

Ключевой приём - сделать элемент строчно-блочным (display: inline-block), а затем использовать свойство box-decoration-break: clone. Это заставит браузер применять стили к каждому фрагменту текста (каждой строке) отдельно. В результате border-radius будет действовать только на углы каждой строки, а не всего абзаца.

.text-background {
  display: inline-block;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: #ffcc00;
  border-radius: 12px;
  padding: 4px 12px;
}

Этот метод работает во всех современных браузерах, включая Chrome, Firefox и Safari. Для старых версий Edge может потребоваться префикс -webkit-.

Альтернативный способ: градиентная маска

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

.text-mask {
  background: #ffcc00;
  -webkit-mask-image: radial-gradient(circle at 0% 50%, transparent 8px, black 8px),
                     radial-gradient(circle at 100% 50%, transparent 8px, black 8px);
  -webkit-mask-composite: xor;
  mask-image: radial-gradient(circle at 0% 50%, transparent 8px, black 8px),
              radial-gradient(circle at 100% 50%, transparent 8px, black 8px);
  mask-composite: exclude;
}

Важно: этот метод не скругляет фон, а обрезает его по маске, поэтому не подходит для полупрозрачных фонов.

Поддержка браузеров и ограничения

Метод с box-decoration-break поддерживается во всех актуальных версиях Chrome (начиная с 54), Firefox (с 32), Safari (с 10). В Internet Explorer 11 этот способ не работает - там фон будет применён ко всему блоку целиком.

Практический пример для вёрстки

Если вы верстаете текст, который может переноситься на несколько строк, используйте первый метод. Он надёжен и прост. Для однострочного текста подойдёт обычный border-radius на строчном элементе.