Skip to content

@nrrrdcore /border.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Faded/Gradient Borders in Pure 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%;
}
@pschfr

Do you have a viewable demo?

@nrrrdcore
Owner

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

Gradient Border

@plasticine

Yeah—this is pretty awesome. Thanks

@nrrrdcore
Owner

Love it @shpoonj!

Thanks you guys!

@stevenh512

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:

@luizanao

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.