Padding on div border

You should be able to do this with the CSS outline property:

<style>
.outer {
       outline: 2px solid #CCC;
       border: 1px solid #999;
       background-color: #999;
       }
</style>

<div class="outer">
example
</div>

Instead of borders, you may use outline property:

div{
  height:300px;
  width:500px;
  background-color:lightblue;
  outline:dashed;
  outline-offset:-10px;    
}
<div></div>

http://jsfiddle.net/H7KdA/


Unfortunately, without adding another div, I don't think you can do this with just CSS.

The more complicated your design gets, the more likely you will need extraneous html tags.

Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.

Best of luck.

Tags:

Css