.rounded-corners-gradient-borders{width:300px;height:80px;border: double 4pxtransparent;border-radius:80px;background-image:linear-gradient(white,white),radial-gradient(circle at top left,#f00,#3020ff);background-origin: border-box;background-clip: content-box, border-box;}
div-border-and-content-background{border-top: double 5pxtransparent;/* first gradient is for card background, second for border background */background-image:linear-gradient(white,white),linear-gradient(to right,grey,black);background-clip: padding-box, border-box;background-origin: border-box;}
.btn-gradient-border{color:rgb(var(--text-color));border:2px double transparent;background-image:linear-gradient(rgb(13,14,33),rgb(13,14,33)),radial-gradient(circle at left top,rgb(1,110,218),rgb(217,0,192));background-origin: border-box;background-clip: padding-box, border-box;}
@importurl('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');html{/* just for showing that background doesn't need to be solid */background:linear-gradient(to right,#DDD0%,#FFF50%,#DDD100%);padding:10px;}.grounded-radiants{position: relative;border:4px solid transparent;border-radius:16px;background:linear-gradient(orange,violet);background-clip: padding-box;padding:10px;/* just to show box-shadow still works fine */box-shadow:03px9pxblack, inset 009pxwhite;}.grounded-radiants::after{position: absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;background:linear-gradient(red,blue);content:'';z-index:-1;border-radius:16px;}