Faded/Gradient Borders in Pure CSS

border.css

.border-container {
  width: 28%; /* border will be on the left on this container */
  float: right;
  overflow: hidden; /* only needed if floating container */
  min-height: 600px; /* static height if you want your container to be taller than its content */
  -moz-box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
  -webkit-box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
  box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
  border-width: 0 0 0 1px;
  -webkit-border-image: 
    -webkit-gradient(linear, 0 100%, 0 0, from(rgba(0,0,0,.09)), to(rgba(0,0,0,0))) 1 100%;
  -webkit-border-image: 
    -webkit-linear-gradient(top, rgba(0,0,0,.09), rgba(0,0,0,0)) 1 100%;
  -moz-border-image:
    -moz-linear-gradient(top, rgba(0,0,0,.09), rgba(0,0,0,0)) 1 100%;    
}

Do you have a viewable demo?

Hi Paul! I don't have a demo up quite yet. But here's a preview:

Yeah—this is pretty awesome. Thanks

Here's my rebound!

https://github.com/shpoonj/nrrrdborder

Love it @shpoonj!

Thanks you guys!

I forked this one and made a Compass mixin out if it too, but it needs some work and it's not compatible with my browser. Here's another take on the same idea, it's a hack but should be more compatible. 😁

its crossbrowsered?