Gradient borders

Question

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);

But this does not work.

Does anyone know what is the correct way to do border gradients?

Answer 1

border-image-slice will extend a CSS border-image gradient

This (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;

Answer 2

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.

Answer 3

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/

Answer 4

Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background.

— https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px; 

— http://www.cssportal.com/css3-preview/borders.htm

Answer 5

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

Answer 6

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; }