CSS3 Gradient Border

Gradient top to Bottom

CSS Code:

.gradient-top-to-bottom{ 
width: 300px;
padding: 20px;
border-top: 5px solid #000;
border-bottom: 5px solid #ccc;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#ccc));
background-image: -webkit-linear-gradient(#000, #ccc);
background-image: -moz-linear-gradient(#000, #ccc),
-moz-linear-gradient(#000, #ccc);
background-image: -o-linear-gradient(#000, #ccc),
-o-linear-gradient(#000, #ccc);
background-image: linear-gradient(#000, #ccc),
linear-gradient(#000, #ccc);
-moz-background-size:5px 100%;
background-size:5px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}
 

HTML

<div class="gradient-top-to-bottom">Your Text goes here.</div> 

Output:


Click here to know more about CSS3 Border Property

Click here to know more about Gradient Background.