Two-Tone Borders with CSS3

June 07, 2011 •

We love texture at Paravel. When you settle on a good texture, there’s nothing better than a slighly embossed horizontal rule to give a letterpress like feel in between sections.

Typically, we’d use a 1×2px image based approach —background-images on nested DIVs (CSS2) or multiple background-images (CSS3)— to accomplish this effect. Challenging ourselves to reduce HTTP Requests, we came up with a simple solution that is future proof and degrades nicely.

<style>
body { background: url(noise.jpg) repeat; }
#blog {
  border-top: 1px solid  midnightblue;
  box-shadow: inset 0 1px 0 white;
}
</style>

<p id="blog">This is my content</p>

View the Demo

Double-Double Borders

What if you need two-tone lines on the top and the bottom of a element? That’s easy as well.

#blog {
  border-top: 1px solid  midnightblue;
  border-bottom: 1px solid midnightblue;
  box-shadow: inset 0 1px 0 white, 0 1px 0 white;
}

UPDATED: Divya Manian and Felix Niklas were quick to point out a better way for multiple borders using multiple box shadows. Updated code, but view the e-solution here!.

comments powered by Disqus