Home » CSS3 Gradient Borders

CSS3 Gradient Borders

				
					.gradient_border{
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}
				
			

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper maximus mattis. Sed eu ex molestie, interdum lorem ac, rhoncus arcu. Donec varius urna enim, malesuada gravida ligula volutpat in. Nam sit amet efficitur lacus. Fusce a condimentum ante.
About Author
Picture of W3Mind

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.
Give it a Share
Facebook
Twitter
LinkedIn
You May Also Like
How to
START A
BLOG
(step by step)
Load WordPress Sites in as fast as 37ms!