<div
  class="clip-border"
  style="padding: 1rem;
  --clip-border-radius: 2rem;
  --clip-border-width: .5rem;
  --clip-border-background: conic-gradient(in hsl longer hue, lime, lime)"
>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo iure vitae sit dolore cupiditate culpa aliquam, reprehenderit facere officiis harum, quod doloremque consequuntur reiciendis placeat assumenda eum quibusdam quos doloribus.</p>
</div>

@property --clip-border-radius {
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

@property --clip-border-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

@property --clip-border-inner-radius {
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

@property --clip-border-inset {
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

.clip-border {
  --clip-border-inner-radius: max(0px, calc(var(--clip-border-radius) - var(--clip-border-width)));
  --clip-border-inset: max(var(--clip-border-radius), var(--clip-border-width));

  position: relative;
  border: var(--clip-border-width) solid var(--clip-border-color, var(--accent-color));
  border-radius: var(--clip-border-radius);
  background-clip: padding-box;

  &::before {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: calc(-1 * var(--clip-border-width));
    background: var(--clip-border-background, var(--accent-color));
    border-radius: var(--clip-border-radius);
    display: none;
  }

  @supports (clip-path: shape(from 0 0, hline to 100%)) {
    border-color: #00000000;

    &::before {
      display: block;
      clip-path: shape(evenodd from 0 0, hline to 100%, vline to 100%, hline to 0, move to var(--clip-border-width) var(--clip-border-inset), arc by var(--clip-border-inner-radius) calc(-1 * var(--clip-border-inner-radius)) of var(--clip-border-inner-radius) cw, hline to calc(100% - var(--clip-border-inset)), arc by var(--clip-border-inner-radius) var(--clip-border-inner-radius) of var(--clip-border-inner-radius) cw, vline to calc(100% - var(--clip-border-inset)), arc by calc(-1 * var(--clip-border-inner-radius)) var(--clip-border-inner-radius) of var(--clip-border-inner-radius) cw, hline to var(--clip-border-inset), arc by calc(-1 * var(--clip-border-inner-radius)) calc(-1 * var(--clip-border-inner-radius)) of var(--clip-border-inner-radius) cw);
    }
  }
}