border to the div through the Header

Issue

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

Solution

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>

Answered By - Albzi