1 box-sizing: content-box;
2 border-width: 8px;
3 border-style: solid;
4 border-image: linear-gradient(to right bottom, #260B3C, #a053df);
5 border-image-slice: 1;
1.rounded-corners-gradient-borders {
2 width: 300px;
3 height: 80px;
4 border: double 4px transparent;
5 border-radius: 80px;
6 background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
7 background-origin: border-box;
8 background-clip: content-box, border-box;
9}
1@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');
2
3html {
4 /* just for showing that background doesn't need to be solid */
5 background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
6 padding: 10px;
7}
8
9.grounded-radiants {
10 position: relative;
11 border: 4px solid transparent;
12 border-radius: 16px;
13 background: linear-gradient(orange, violet);
14 background-clip: padding-box;
15 padding: 10px;
16 /* just to show box-shadow still works fine */
17 box-shadow: 0 3px 9px black, inset 0 0 9px white;
18}
19
20.grounded-radiants::after {
21 position: absolute;
22 top: -4px; bottom: -4px;
23 left: -4px; right: -4px;
24 background: linear-gradient(red, blue);
25 content: '';
26 z-index: -1;
27 border-radius: 16px;
28}
29<p class="grounded-radiants">
30 Some text is here.<br/>
31 There's even a line break!<br/>
32 so cool.
33</p>