Corinne Corinne - 2 years ago 104
HTML Question

outline on only one border

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:

Answer Source

Outline indeed does apply to the whole element.

Now that i see your image, here's how to achieve it.


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


.element {
  padding:5px 0;
.element:before {
  padding:2px 0;
  border-top:1px dashed #000; 
.element p {
  padding:0 10px;


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download