Skip to content

Instantly share code, notes, and snippets.

@nrrrdcore
Created August 29, 2012 05:35
Show Gist options
  • Save nrrrdcore/3507175 to your computer and use it in GitHub Desktop.
Save nrrrdcore/3507175 to your computer and use it in GitHub Desktop.
FireFox Friendly Faded Gradient Border CSS
.divider {
float: right; /* float this next to ur linkz */
display: block;
height: 47px; /* this */
width: 1px; /* where the magic happens */
margin: -7px 6px 0 10px; /* pulls the border to the top of the header */
background-image: -webkit-linear-gradient(top, rgba(0,93,131,.5) 50%, rgba(0,93,131,.22) 100%); /* good in safari & chrome */
background-image: -moz-linear-gradient(top, rgba(0,93,131,.5) 50%, rgba(0,93,131,.22) 100%); /* firefox friendly shit */
box-shadow: 1px 0 0 0 rgba(255,255,255,.1); /* white highlight on the inside of the border, ff now accepts this w/o a prefix */
}
<a href="#">link goes here</a>
<span class="divider"></span>
@nrrrdcore
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment