outline on only one border

Question

How to apply an inset border into an HTML element, but just only on one side of it. Until now, I've been using an image to do that (GIF/PNG) that I would then use as a background and stretch it (repeat-x) and position a little off from the top of my block. Recently, I discovered the outline CSS property, which is great! But seems to circle the whole block... Is it possibly to use this outline property to do it on just only one border? Also, if not, do you have any CSS trick that could replace the background image? (so that I could personalize the colors of the outline later using CSS, etc). Thanks in advance!

Here's an image of what am trying to achieve: http://exiledesigns.com/stack.jpg

Answer 1

You can use box-shadow to create an outline on one side. Like outline, box-shadow does not change the size of the box model.

This puts a line on top:

box-shadow: 0 -1px 0 #000; 

I made a jsFiddle where you can check it out in action.

The syntax is box-shadow: offset-x | offset-y | blur-radius | color

---

INSET

For an inset border, use the inset keyword. This puts an inset line on top:

box-shadow: 0 1px 0 #000 inset; 

Multiple lines can be added using comma-separated statements. This puts an inset line on the top and the left:

box-shadow: 0 1px 0 #000 inset,             1px 0 0 #000 inset; 

For more details on how box-shadow works, check out the MDN page.