Here is a simple solution with true content transparency using masking (all major browsers 2023+):

.gradient-box::before {
  mask-image: linear-gradient(white), linear-gradient(white);
  mask-clip: no-clip, content-box;
  mask-composite: subtract;
  border-radius: 24px;
  border: 4px solid transparent;
  background-size: 100%;
  background-origin: border-box;
  background: conic-gradient( 
    red, orange, yellow, green, blue, red);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.gradient-box {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  align-items: center;
}

This works with borders of any roundness or thickness, has a transparent fill, and only requires a single div in the markup:

<div class="gradient-box">
  Look ma, no background!
</div>

https://jsfiddle.net/ashtender/jk2aedqL/5/