Пример использования «box-decoration-break»

Когда текст находится внутри фона с закруглёнными краями, то при переносе текста он становится немного неаккуратным.

Чтобы текст в этой ситуации выглядел более аккуратным, используют свойство box-decoration-break, который задаёт стиль разрыва строк.

/* <h1><span>Заголовок с фоном</span></h1> */
h1 span {
    display: inline;
    background-color: #b5226c;
    padding: 5px 10px;
    border-radius: 10px;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

Результат кода: