Possible to place border on inside of padding using only one div?

Question

I'm just wondering if anyone knows a way to use only one div to get an inlayed border effect? Or do I have to use two? Here's what I mean:

I'm currently using a div with a border, wrapped inside a div with padding. I have to keep track mentally of which in_wraps go with which out_wraps. I'd like to just have on element on the page that will look like this:

instead of having to use two divs and match them up. Here is the CSS I'm using:

.out_wrap_blk{
    padding: 5px;
    background: black;
    float:left;
    margin: 10px;
}

.out_wrap_gry{
    padding: 5px;
    background: #323232;
    float:left;
    margin: 10px;
}

.in_wrap_grn{
    border: 1px solid #0CFF0E;
    padding: 20px;
}

.in_wrap_blk{
    border: 1px solid black;
    padding: 20px;
}

Is it possible to reduce this to just one element or do I have to stick with an outside element wrapped around an inside element?

Answer 1

Try this:

#bor-outline {
  width: 100px;
  height: 100px;
  background: grey;
  border: 4px solid #292929;
  outline: 4px solid #e3e3e3;
}

<div id="bor-outline">
  hello
</div>