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);
Another hack for achieving the same effect is to utilize multiple background images, a feature that is supported in IE9+, newish Firefox, and most WebKit-based browsers: http://caniuse.com/#feat=multibackgrounds
There are also some options for using multiple backgrounds in IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/
For example, suppose you want a 5px-wide left border that is a linear gradient from blue to white. Create the gradient as an image and export to a PNG. List any other CSS backgrounds after the one for the left border gradient:
#theBox { background: url(/images/theBox-leftBorderGradient.png) left no-repeat, ...; }
You can adapt this technique to top, right, and bottom border gradients by changing the background position part of the background
shorthand property.
Here is a jsFiddle for the given example: http://jsfiddle.net/jLnDt/
I agree with szajmon. The only problem with his and Quentin's answers is cross-browser compatibility.
HTML:
<div class="g">
<div>bla</div>
</div>
CSS:
.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}
.g > div { background: #fff; }
Webkit supports gradients in borders, and now accepts the gradient in the Mozilla format.
Firefox claims to support gradients in two ways:
IE9 has no support.
Gradient Borders from Css-Tricks: http://css-tricks.com/examples/GradientBorder/
.multbg-top-to-bottom {
border-top: 3px solid black;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image:
-moz-linear-gradient(#000, transparent),
-moz-linear-gradient(#000, transparent);
background-image:
-o-linear-gradient(#000, transparent),
-o-linear-gradient(#000, transparent);
background-image:
linear-gradient(#000, transparent),
linear-gradient(#000, transparent);
-moz-background-size: 3px 100%;
background-size: 3px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
Here's a nice semi cross-browser way to have gradient borders that fade out half way down. Simply by setting the color-stop to rgba(0, 0, 0, 0)
.fade-out-borders {
min-height: 200px; /* for example */
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}
<div class="fade-out-border"></div>
Usage explained:
Formal grammar: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
More here: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Example for Gradient Border
Using border-image css property
Credits to : border-image in Mozilla
.grad-border {
height: 1px;
width: 85%;
margin: 0 auto;
display: flex;
}
.left-border, .right-border {
width: 50%;
border-bottom: 2px solid #695f52;
display: inline-block;
}
.left-border {
border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}
<div class="grad-border">
<div class="left-border"></div>
<div class="right-border"></div>
</div>