Digital Brent Digital Brent - 1 month ago 7
CSS Question

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

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:

box example

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

Try this

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

See demo