box-sizing: content-box;<br /> border-width: 8px;<br /> border-style: solid;<br /> border-image: linear-gradient(to right bottom, #260B3C, #a053df);<br /> border-image-slice: 1;

.rounded-corners-gradient-borders {<br /> width: 300px;<br /> height: 80px;<br /> border: double 4px transparent;<br /> border-radius: 80px;<br /> background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);<br /> background-origin: border-box;<br /> background-clip: content-box, border-box;<br /> }

<br /> div{<br /> width: 300px;<br /> height: 80px;<br /> border: double 5px transparent;<br /> border-radius: 30px;<br /> background-image: linear-gradient(white, white), /*here must be*/<br /> linear-gradient(to right, green, gold); /*both gradients*/<br /> background-origin: border-box;<br /> background-clip: content-box, border-box;<br /> }

.btn-gradient-border {<br /> color: rgb(var(–text-color));<br /> border: 2px double transparent;<br /> 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));<br /> background-origin: border-box;<br /> background-clip: padding-box, border-box;<br /> }

div-border-and-content-background {<br /> border-top: double 5px transparent;</p> <p> /* first gradient is for card background, second for border background */<br /> background-image: linear-gradient(white,white), linear-gradient(to right, grey, black);<br /> background-clip: padding-box, border-box;<br /> background-origin: border-box;<br /> }

@import url(‘//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css’);</p> <p>html {<br /> /* just for showing that background doesn’t need to be solid */<br /> background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);<br /> padding: 10px;<br /> }</p> <p>.grounded-radiants {<br /> position: relative;<br /> border: 4px solid transparent;<br /> border-radius: 16px;<br /> background: linear-gradient(orange, violet);<br /> background-clip: padding-box;<br /> padding: 10px;<br /> /* just to show box-shadow still works fine */<br /> box-shadow: 0 3px 9px black, inset 0 0 9px white;<br /> }</p> <p>.grounded-radiants::after {<br /> position: absolute;<br /> top: -4px; bottom: -4px;<br /> left: -4px; right: -4px;<br /> background: linear-gradient(red, blue);<br /> content: ”;<br /> z-index: -1;<br /> border-radius: 16px;<br /> }

.box {<br /> position: relative;<br /> }<br /> .box::before {<br /> content: “”;<br /> position: absolute;<br /> inset: 0;<br /> border-radius: 50px;<br /> padding: 10px;<br /> background:linear-gradient(45deg,red,blue);<br /> -webkit-mask:<br /> linear-gradient(#fff 0 0) content-box,<br /> linear-gradient(#fff 0 0);<br /> -webkit-mask-composite: xor;<br /> mask-composite: exclude;<br /> }