Gradient Border
Result
Output code:
.button-with-gradient-border {
background-image:
radial-gradient(circle at 100% 100%, transparent 14px, #d50000 14px, #d50000 20px, transparent 20px),
linear-gradient(to right, #d50000, #304ffe),
radial-gradient(circle at 0% 100%, transparent 14px, #304ffe 14px, #304ffe 20px, transparent 20px),
linear-gradient(to bottom, #304ffe, #00bfa5),
radial-gradient(circle at 0% 0%, transparent 14px, #00bfa5 14px, #00bfa5 20px, transparent 20px),
linear-gradient(to left, #00bfa5, #ffd600),
radial-gradient(circle at 100% 0%, transparent 14px, #ffd600 14px, #ffd600 20px, transparent 20px),
linear-gradient(to top, #ffd600, #d50000)
background-size:
20px 20px,
calc(100% - 40px) 6px,
20px 20px,
6px calc(100% - 40px)
background-position:
top left,top center,top right,center right, bottom right,bottom center,bottom left,center left
background-repeat:
no-repeat
}
