How to create a CSS3 border fadeout
With CSS3, you can create a border that fades out gradually using the :before and :after css pseudo classes and css gradients.
I haven’t seen this technique done anywhere so I decided to post it. It was inspired by the Multiple Borders technique posted by Jeffery Way you can actually do a lot using the before and after pseudo classes, adding elements to one element that is not considered part of the html structure or the document flow(if positioned absolutely).
View the demo | Download the source
Related posts:

March 24th, 2011 at 10:29 am
Hey this code is amazing. It works in FF, Saf & Chr. Just not working in IE7 & 8. I tried adding a filter to CSS to create the gradient in IE & I added so the pseudo elements would work in IE7. Weird thing is that now it works in IE7 but not IE8. Any idea to make the fading borders work in IE 8? Thanks, Zachary
May 27th, 2011 at 10:38 pm
Undoubtedly worth you talking about it useful article. Amazing!
February 18th, 2012 at 4:03 am
[...] check this : http://mhuntdesign.com/blog/css/how-to-create-a-css3-border-fadeout/ Share this:TwitterFacebookLike this:LikeBe the first to like this [...]