gradient on border css code example
Example 1: css gradient border
box-sizing: content-box;
border-width: 8px;
border-style: solid;
border-image: linear-gradient(to right bottom, #260B3C, #a053df);
border-image-slice: 1;
Example 2: linear gradient border
div-border-and-content-background {
border-top: double 5px transparent;
/* 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;
}
Example 3: border gradient css radius
@import url('//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, #DDD 0%, #FFF 50%, #DDD 100%);
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: 0 3px 9px black, inset 0 0 9px white;
}
.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;
}
<p class="grounded-radiants">
Some text is here.<br/>
There's even a line break!<br/>
so cool.
</p>