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:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. commodo vitae, ornare sit amet, wisi.


Click here to know more about CSS3 Border Property

Click here to know more about Gradient Background.

Comments
22 January
2014
vaghela dev
Hello,

I like this website very much because of i have learn many thing form this website.

Regard
Vaghela Dev
comments powered by Disqus