I\'m trying to apply a gradient to a border, I thought it was as simple as doing this:
border-color: -moz-linear-gradient(top, #555555, #111111);
Try the below example:
.border-gradient {
border-width: 5px 5px 5px 5px;
border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
border-image-slice: 9;
border-style: solid;
}
Try this, it worked for me.
div{
border-radius: 20px;
height: 70vh;
overflow: hidden;
}
div::before{
content: '';
display: block;
box-sizing: border-box;
height: 100%;
border: 1em solid transparent;
border-image: linear-gradient(to top, red 0%, blue 100%);
border-image-slice: 1;
}
<div></div>
The link is to the fiddle https://jsfiddle.net/yash009/kayjqve3/1/ hope this helps
For cross-browser support you can try as well imitate a gradient border with :before
or :after
pseudo elements, depends on what you want to do.
It's a hack, but you can achieve this effect in some cases by using the background-image to specify the gradient and then masking the actual background with a box-shadow. For example:
p {
display: inline-block;
width: 50px;
height: 50px;
/* The background is used to specify the border background */
background: -moz-linear-gradient(45deg, #f00, #ff0);
background: -webkit-linear-gradient(45deg, #f00, #ff0);
/* Background origin is the padding box by default.
Override to make the background cover the border as well. */
-moz-background-origin: border;
background-origin: border-box;
/* A transparent border determines the width */
border: 4px solid transparent;
border-radius: 8px;
box-shadow:
inset 0 0 12px #0cc, /* Inset shadow */
0 0 12px #0cc, /* Outset shadow */
inset -999px 0 0 #fff; /* The background color */
}
From: http://blog.nateps.com/the-elusive-css-border-gradient
WebKit now (and Chrome 12 at least) supports gradients as border image:
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image
border-image-slice
will extend a CSS border-image gradientThis (as I understand it) prevents the default slicing of the "image" into sections - without it, nothing appears if the border is on one side only, and if it's around the entire element four tiny gradients appear in each corner.
border-bottom: 6px solid transparent;
border-image: linear-gradient(to right, red , yellow);
border-image-slice: 1;