Padding on div border

Question

I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).

Here is the design.

I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.

Thank you.

Answer 1

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> 

Answer 2

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/