Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Faded/Gradient Borders in Pure CSS

View border.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%;
}
pschfr commented

Do you have a viewable demo?

Owner

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

Gradient Border

Yeah—this is pretty awesome. Thanks

Owner

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.