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).

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

Answer 1

Outline indeed does apply to the whole element.

Now that I see your image, here’s how to achieve it.

.element {
  padding: 5px 0;
  background: #CCC;
}
.element:before {
  content: "\a0";
  display: block;
  padding: 2px 0;
  line-height: 1px;
  border-top: 1px dashed #000; 
}
.element p {
  padding: 0 10px;
}

<div class="element">
  <p>Some content comes here...</p>
</div>

(Or see external demo.)

All sizes and colors are just placeholders, you can change it to match the exact desired result.

Important note: .element must have display:block; (default for a div) for this to work. If it’s not the case, please provide your full code, so that i can elaborate a specific answer.