Выделение текста с закругленными углами

svg {
  display: none;
}

div {
  padding: 20px 50px;
  border-radius: 20px;
  background-color: white;
}

h1 {
  display: inline;
  position: relative;
  padding: 10px 15px;
  font-size: 25px;
  line-height: 1.5;
  background-color: darkred;
  color: lightgray;
  border-radius: 15px;
  -webkit-box-decoration-break: clone;
  -moz-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-filter: url(#filter);
  -moz-filter: url(#filter);
  -ms-filter: url(#filter);
  filter: url(#filter);
}

h1:after {
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  left: 0;
  top: 15px;
  bottom: 15px;
  background-color: inherit;
}

<div>
  <h1>Красный Попугай все реже спускается на землю. В мире появился новый свет, исходящий от Солнца и от Луны.<br>Черно-белые предметы стали цветными. Но хотя цвет разрешен, не злоупотребляйте терпением Красного Попугая!»</h1>
</div>
<svg>
  <defs>
    <filter id="filter">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"/>
      <feColorMatrix in="blur" result="colormatrix"
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 20 -10" />
      <feBlend in="SourceGraphic" in2="colormatrix"/>
    </filter>
  </defs>
</svg>