Rounded highlighter marker effect in CSS

December 1, 2021

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:

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>

>Solution :

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>