border to the div through the Header - html

Question

i want to achieve the border and header like this -
[![][1]][1]
Does css have anything for it?
What i tried and works is-
.header{
margin-top:-10px;
background:#fff;
}
Are there any other options to achieve this.?
[1]: https://i.stack.imgur.com/iHCVG.jpg

Answer 1

You can use :before or :after
Fiddle
HTML:
<header></header>
CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header:before{
content:'Header';
position:absolute;
top:-10px;
left:50px;
background:#fff;
padding:0 20px;
}
You can also use two elements:
header and h1
JSFiddle
html:
<header><h1>Header</h1></header>
CSS:
header{
border:3px solid;
height:300px;
position:relative;
}
header > h1{
position:absolute;
top:-35px;
left:50px;
background:#fff;
padding:0 20px;
}
Or keep it really simple and use fieldset.
JSFiddle
<fieldset>
<legend>Header</legend>
</fieldset>

Answer 2

As already commented, you could use fieldset. Which will work, but isn't the cleanest solution if it isn't used for a form.
The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
Source.
As alternativ you could try this code:
HTML:
<div class="box">
<h3>title</h3>
</div>
CSS:
.box
width: 400px;
height: 200px;
border: 1px solid black;
}
.box > h3 {
position: absolute;
background: white;
height: 20px;
margin-top: -12px;
margin-left: 10px;
padding: 0 10px;
}
DEMO