32

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.

Border Example

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.

7 Answers 7

37

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>
1
  • Perfect. I was thinking there was a way to put a double border on a div. Thanks for your help Edd!
    – floatleft
    Commented Sep 16, 2010 at 13:19
35

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/

1
  • 7
    This definitely works, and solves the OP's problem, but note that this only works if you want to apply a border to the whole element - it can't be used on a single edge. i.e. there's no outline-top, outline-bottom, etc.. It thus can't be used instead of borders in general, but it works fine for this use case. Commented Feb 29, 2016 at 6:38
1

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

3
  • But that doesn't pull the border 'inside the div', i.e. the background color of the div would not be shown outside the border. Not sure if this is what the OP wants though. Commented Sep 14, 2010 at 15:33
  • Can you give margin color to a div?
    – floatleft
    Commented Sep 14, 2010 at 15:41
  • @chad I don't think so ... well, you can specify the background color: the margin color is the background color.
    – ChrisW
    Commented Sep 14, 2010 at 17:42
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.

1

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>
0

you can define a margin for the first child element based on the parent element selector. e.g.

.outer:first-child {
  margin : 10px;
}

This way any element put inside the .outer will automatically have 10px margin. If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.

.outer > * {
  margin : 10px;
}
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.