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.

Answer 1

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.

Answer 2

No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.

Maybe if you post an example of what you're trying to do we can come up with alternate solutions?

-update- Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.

Answer 3

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/

Answer 4

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 5

Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.

Answer 6

You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:

<style>
    .outer {
        background: #ccc;
        display: table;
        width: 400px;
    }

    .inner {
        border: 2px dashed #999;
        height: 50px;
        margin: 5px;
    }

</style>

<div class="outer">

<div class="inner">
</div>

</div>