pure CSS linear gradient border

Question

Using pure CSS, how do I create a border that is a vertical, linear gradient?

I want to use -moz-linear-gradient and not an image file. The only browser I need to support for this project will be Firefox.

I want the border to be 10px thick with a corner radius of 20px. I also want the border to be a linear gradient with an orange color (shown below) at the top fading to gray at the bottom.

#box {
    border: 10px #808080 solid;
    -moz-border-radius: 20px;
    /* -moz-linear-gradient: ??? #F58154 #CCCCCC ???; */
}

I have reviewed other questions without seeing a good answer (like this article and this ref in there.) I will accept an answer that uses HTML/CSS without images, even if the markup contains div layers necessary to achieve this effect. Thanks!

Dylan Hayes · Answer 1 · 2012-03-15T13:57:46.967

I believe this should do the trick for you. You have to set the background property to the gradient.

#box {
    border: 10px #808080 solid;
    -moz-border-radius: 20px;
    background: -moz-linear-gradient(top,  #f58154, #CCC);
}

EDIT: I read the question wrong, i answered your question as if you wanted a gradient background. Brian Hough's solution below is good if you want a straight linear gradient on your border from top to bottom. If you wanted an outside/inside gradient on all sides you would want to do something like

#box {
    border: 10px solid black;
    -moz-border-radius: 20px;

    /* Gradient on all sides*/
    -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;

    background: black;
    height: 200px;
    width: 200px;
}

This isn't quite the result I wanted but it seems to be a cool effect and could be useful later. — f8loot, Mar 23 '12 at 00:25

Brian Hough · Accepted Answer · 2012-03-15T18:05:33.123

If you are trying to make the border a gradient you will need to fake it. Obviously you will need to adjust for the div size and what type of content your putting in it. But this should give you the gist.

The HTML

<div id="outer-box">
   <div id="inner-box">
      <p>Some Text</p>
   </div>
</div>

The CSS

  #outer-box {
            padding: 10px;
            -moz-border-radius: 20px;
            background: -moz-linear-gradient(top,  #f58154, #CCC);
        }

  #inner-box {
            -moz-border-radius: 20px;
            background: #fff;
        }

EDIT: To piggy-back on Dylan Hayes additional solution. You could also use a radial gradient to accomplish the same thing. Again would need tweaked based on the size of the elements.

#outer-box {
              padding: 10px;
              height: 200px;
              width: 200px;
              -moz-border-radius: 20px;
              background: -moz-radial-gradient(#CCC, #f58154);
          }

    #inner-box {
              height: 200px;
              width: 200px;
              -moz-border-radius: 20px;
              background: #fff;
          }

score 0 · Answer 3 · answered Mar 15 '12 at 14:07

0

It can be done with HTML5 too. In HTML5 you can make a canvas and draw on it with JS --> gradient too.
Tutorial found here.

answered Mar 15 '12 at 14:07

11684

7,356
12
48
71

pure CSS linear gradient border

3 Answers3