pure CSS linear gradient border

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!

---

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

---

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

---

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.

链接地址: http://www.djcxy.com/p/66388.html

上一篇: 与IE浏览器的CSS样式菜单问题

下一篇: 纯CSS线性渐变边框