Inset border with CSS3 box-shadow

Be Sociable, Share!

• 

• Tweet

A snazzy inset line can go a long way to making your design feel like it lives in a three dimensional world. I’m going to show you how I’ve been accomplishing this effect using CSS3′s super amazing box-shadow property.

I used to apply a dark top border and light bottom border, this worked great for the elements in the middle, but the first and last elements were either missing their counterparts or had an unwanted border. This meant you would need some :first-child :last-child action. With this method the entire effect is applied to one side of the element, so if you are doing a vertical implementation like our demo, you apply the “border” to the bottom and you’re all set.

This technique will only work in awesome browsers. So if your browser doesn’t render it properly, it might be time to upgrade.

To demonstrate I’m going to use a vertical menu with inset lines separating the elements. When we’re all done it’s going to look like this:

Let’s get to it!

Step 1: HTML

Here’s a simple list containing our navigation:

Step 2: CSS

Next we add a little style. Let’s start with some structural stuff.

Step 3: Magic!

For the uninitiated, here’s a brief run down on the anatomy of box-shadow.

The first number is the horizontal offset, 5px here would send the shadow 5px to the right. The second is vertical offset. The third is the blur distance. Then comes the color (in our example, we use rgba to get some transparency). Adding “inset” will create an inner shadow, rather than the default outer shadow. You can stack multiple shadows on an element by separating then with commas.

Now we add two box-shadows to each item.

The first shadow is inset with a vertical position of -1px, the other not inset with a vertical position of 1px. This gives us a dark shadow 1px up from the bottom of our element and a light shadow 1px directly below our element. Because we gave both shadows a blur distance of 0px they both look like a single pixel line.

Using black and white with alpha makes this work well on most background colors, tweak the alpha settings to make it just right.

That’s it! I hope this helps.