border-top with linear gradient?

Question

I want that i have only top border but with gradient color. Something like this

#grad1 {
    height: 200px;

    border-top:205px red; /* For browsers that do not support gradients */
    border-top:205px -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
     border-top:205px -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
     border-top:205px -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
     border-top:205px linear-gradient(red, yellow); /* Standard syntax (must be last) */
}

Is this possible and if it is how i can do this?

Answer 1

CSS Tricks has a great article about gradient borders:

https://css-tricks.com/examples/GradientBorder/

As to only having it show on border top, you would need to make sure all the other sides of the border are set to 0.

-webkit-border-image: 
  -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
  -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
  -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
-o-border-image:
  -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
border-image:
  linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;

border-bottom: 0;
border-right: 0;
border-left: 0;