border to the div through the Header

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