1/border-liner-gadient
<!-- -->
.box {
position: relative;
padding: 20px 30px;
margin: 5px;
display: inline-block;
font-size: 30px;
}

.box::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50px;
padding: 10px; /* control the border thickness */
background: linear-gradient(45deg, red, blue);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
<div class="box">
Hello World
</div>

<div class="box">
Hello World again
</div>
<div class="box">
Hello World <br> two lines
</div>
<!-- -->