Add internal border on div within the padding - css

Question

I have a div with a padding and I would like to add an "internal" border, considering padding. For example, consider to have this CSS:
div#border {
padding:10px;
border:1px solid;
background-color:#ccc;
}
My goal in this case is to create an internal solid border, far 10px from div border, but I only get an external border (jsFiddle). Adding an internal div does the trick but adds an extra HTML element (jsFiddle):
div#border {
padding:10px;
background-color:#ccc;
}
div#internal {
border:1px solid;
}
I've tried to add an outline as suggested here, but when I have two adiacent divs with outline, there's an overlap between (jsFiddle).
Is there a pure-CSS solution to add an "internal" border to a div, considering padding, without adding extra HTML elements and without overlapping on adiacent divs?

Answer 1

Solution #1 Use box-shadow with inset
We can take advantage of the fact that multiple values can be used for the box-shadow property.
The trick here is to set the first inner shadow with the background color of the div, and the second inner shadow - which is slightly larger - with the color of the border.
FIDDLE
div#border {
padding: 10px;
box-shadow: inset 0 0 0 9px #ccc, inset 0 0 0 10px black;
background-color: #ccc;
}
<div id="border">some content</div>
Solution #2 Use outline with the outline-offset property.
outline:1px solid;
outline-offset: -10px;
FIDDLE
div#border {
padding: 10px;
outline: 1px solid;
outline-offset: -10px;
background-color: #ccc;
}
<div id="border">some content</div>