Blog

Last Article:
Next Article:
FreshBooks

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:

  1. How to create a custom Apple iPad/iPhone Home screen icon for your Website
  2. Freelance WordPress Web Design, Drupal Development 04-12-11 – 04-13-11
  3. Freelance Web Design: Drupal Development, WordPress, SEO, jQuery, CSS: 07-20-10 – 07-22-10

This entry was posted on Saturday, July 17th, 2010 at 11:56 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “How to create a CSS3 border fadeout”

  1. Zachary Says:
    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

  2. Domenica Washum Says:
    May 27th, 2011 at 10:38 pm

    Undoubtedly worth you talking about it useful article. Amazing!

  3. Install php, mysql, phpmyadmin on ubuntu « Oaattia Says:
    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 [...]

Comment on this article: