Result
Output code:
.button-with-gradient-border {
background-image:
radial-gradient(circle at 100% 100%, transparent 15px, #38bf1d 15px, #38bf1d 19px, transparent 19px),
linear-gradient(to right, #38bf1d, #304ffe),
radial-gradient(circle at 0% 100%, transparent 15px, #304ffe 15px, #304ffe 19px, transparent 19px),
linear-gradient(to bottom, #304ffe, #00bfa5),
radial-gradient(circle at 0% 0%, transparent 15px, #00bfa5 15px, #00bfa5 19px, transparent 19px),
linear-gradient(to left, #00bfa5, #ffd600),
radial-gradient(circle at 100% 0%, transparent 15px, #ffd600 15px, #ffd600 19px, transparent 19px),
linear-gradient(to top, #ffd600, #38bf1d)
background-size:
19px 19px,
calc(100% - 38px) 4px,
19px 19px,
4px calc(100% - 38px)
background-position:
top left,top center,top right,center right, bottom right,bottom center,bottom left,center left
background-repeat:
no-repeat
}
