Two-Toned Borders with CSS3

Need a lightweight, imageless CSS solution for two-toned borders (like the one above)? So did we! So we jammed together a border & a box-shadow.

Sample code

<h1>Two-Toned Border with CSS3</h1>
<style>
  h1 {
    border-bottom: 1px solid #025;
    box-shadow: 0 1px 0 #fcfcfc;
    /* you'll need all the vendor prefixes for `box-shadow` */
  }
</style>

It's pretty extendible. You can plop them on any side you want, you just have to do some math. There's more about 2-toned CSS borders in the blog post or View Sass. Enjoy!