I'd like to achieve the following effect, where the green marker in the background should also respect line wraps. This means that in contrast to questions like

Currently, I already managed to do it like this, but the top edges of the underline are not rounded here, because the border-radius obviously cannot affect those. How can I fix this?

.highlighted {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 60%,
    rgba(154, 216, 215, 1) 60%,
    rgba(154, 216, 215, 1) 100%
  );
  padding: 0 0.5rem;
  line-height: 2;
  font-size: 2rem;
  display: inline;
  font-weight: bold;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  max-width: 100vw;
  border-radius: 8px;
}

<div class="highlighted">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use multiple background:

.highlighted {
  --c:rgb(154, 216, 215); /* the color */
  --r:12px; /* the size/radius */
  background: 
    radial-gradient(farthest-side,var(--c) 98%,#0000) bottom left,
    linear-gradient(var(--c) 0 0) bottom,
    radial-gradient(farthest-side,var(--c) 98%,#0000) bottom right;
  background-size:var(--r) var(--r),calc(100% - var(--r)) var(--r);
  background-repeat:no-repeat;
  padding: 0 0.5rem;
  line-height: 2;
  font-size: 2rem;
  display: inline;
  font-weight: bold;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

<div class="highlighted">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

<div class="highlighted" style="--c:red;--r:16px">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Another syntax with less gradients:

.highlighted {
  --c:rgb(154, 216, 215); /* the color */
  --r:12px; /* the size/radius */
  background: 
    radial-gradient(farthest-side,var(--c) 98%,#0000) 
     0 100%/var(--r) var(--r) round no-repeat,
    linear-gradient(var(--c) 0 0) 
     bottom/calc(100% - var(--r)) var(--r) no-repeat;
  padding: 0 0.5rem;
  line-height: 2;
  font-size: 2rem;
  display: inline;
  font-weight: bold;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

<div class="highlighted">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

<div class="highlighted" style="--c:red;--r:16px">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>