'Rounded highlighter marker effect in CSS

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 this one, the marker effect should not span the entire height of the text, but just the bottom part:

enter image description here

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>
htmlcss


Solution 1:[1]

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>

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>

Solution 2:[2]

*,
*::before,
*::after {
  box-sizing: border-box;
}


body{
  min-height: 100vh;
  /* background-color: bisque; */
  display: grid;
  place-content: center;
  overflow: hidden;
  
}

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

p{
  font-size:5rem;
  font-weight: 900;
  position: relative;
  z-index: 1;
  width: fit-content;
}

p::before{
  position: absolute;
  content: "";
  width:100%;
  height: 30px;
  bottom: 10%;
  background-color: #dadada;
  z-index: -1;
  border-radius: 1rem;
}
<div class="container">
      <p>Hello</p>
      <p>Lorem, ipsum.</p>
      <p>Lorem, ipsum dolor.</p>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 UPinar

Related Questions