Css Rotate 45 causes break in border with gradient - html

Question

I've noticed that there are slight visible breaks in the CSS border image when rotating. Is there a way to prevent this or another method to achieve the same solution?
.box {
margin: 150px;
width: 250px;
height: 250px;
background: lightGray;
border: 20px solid blue;
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
}
.r45 {
transform: rotate(-45deg);
color: red;
}
<div class="box">
<p class="r45">Hello</p>
</div>

Answer 1

Another method to achieve the same solution is using pseudo:after as shown in the below working example, hope it helps :)
.box {
margin: 150px;
width: 250px;
height: 250px;
background: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.box:after {
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
content: '';
background: lightGray;
position: absolute;
}
.r45 {
transform: rotate(-45deg);
color: red;
position: relative;
z-index: 1;
}
<div class="box">
<p class="r45">Hello</p>
</div>

Answer 2

You can use background and adjust background-clip and you will avoid the strange rendering of border
.box {
margin: 80px;
width: 250px;
height: 250px;
background:
linear-gradient(lightGray,lightGray) padding-box,
linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) border-box;
border: 20px solid transparent;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
}
.r45 {
transform: rotate(-45deg);
color: red;
}
<div class="box">
<p class="r45">Hello</p>
</div>