<p>
  Incididunt culpa deserunt laborum duis. Minim qui velit do dolore nulla
  excepteur voluptate velit sit enim aute irure in fugiat.
  <a class="underline-rounded" href="#"
    >Esse et esse aliqua consectetur elit ut aliqua in labore labore elit in
    fugiat deserunt dolor.</a
  >
  Consectetur laborum est eu culpa sunt aliquip pariatur Lorem. Laboris ipsum
  voluptate reprehenderit dolore est adipisicing incididunt anim irure Lorem
  elit non tempor et aute.
</p>

<style>
  @property --underline-color {
    syntax: "<color>";
    initial-value: gray;
    inherits: false;
  }

  .underline-rounded {
    text-decoration: none;
    padding: 2px 0;
    --underline-offset: 3px;
    --underline-thickness: 2px;
    --underline-color: blue;

    --bg-pos: calc(1em + var(--underline-offset) + 1px);
    --bg-circle: var(--underline-color);
    --left: calc(var(--underline-thickness) / 2);
    --width: calc(100% - var(--underline-thickness));

    --bg-line: linear-gradient(var(--underline-color), var(--underline-color))
      no-repeat var(--left) var(--bg-pos) / var(--width)
      var(--underline-thickness);

    --bg-left: radial-gradient(
        var(--underline-thickness) circle at center,
        var(--bg-circle) 50%,
        transparent 51%
      )
      no-repeat left var(--bg-pos) / var(--underline-thickness)
      var(--underline-thickness);

    --bg-right: radial-gradient(
        var(--underline-thickness) circle at center,
        var(--bg-circle) 50%,
        transparent 51%
      )
      no-repeat right var(--bg-pos) / var(--underline-thickness)
      var(--underline-thickness);
    --bg-rounded-underline: var(--bg-left), var(--bg-right), var(--bg-line);

    background: var(--bg-rounded-underline);
    box-decoration-break: clone;

    transition: 120ms ease-out;
    transition-property: --underline-color, color;

    &:focus-visible,
    &:hover {
      color: darkblue;
      --underline-color: darkBlue;
    }
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 24px;
  }

  p {
    font-weight: 400;
    line-height: 1.4;
    font-size: large;
    max-width: 460px;
    margin: auto;
  }
</style>