Border Inside Div

HTML & CSS
1

Hi
I have a large white div as a header. The background of the site is blue. I want a 1px grey border around the div, but inside it by 10px all round.
An image should be attached for you.
Obviously I could use this as a background image. Just wondering if there’s a better way?
Thanks

2

Like this?


.header{background:#fff; padding:10px;}
.inner-header{border:1px solid grey;}



<div class="header">
<div class="inner-header">
This one will have the border
</div><!-- /.inner-header -->
</div><!-- /.header -->
3

I adapted your suggestion a little by just putting a 10px margin around the inner header as I’ve got a menu in the header div that I didn’t want the border around, but thanks very much for putting me on the right track!

#header {
	background: #fff;
	height: 480px;
	
}

#innerHeader {
	margin: 10px;
	border: 1px solid #ccc;
	height: 408px;
}