public
Last active

Faded/Gradient Borders in Pure CSS

  • Download Gist
border.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
.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:

Gradient Border

Yeah—this is pretty awesome. Thanks

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. :grin:

its crossbrowsered?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.