Create DIV with border crossing the title

Question

I need to make a div that has a border of 2 px, but this div has a title and I need this title to be centered with the border.

View and image:

How can I do that? I searched here on the site but could not find a solution.

Answer 1

You can do something like this:

.form1 {
  text-align: 'center'
}
.form1 fieldset{
  border: 2px solid #06c;
}
.form1 legend{
  text-align: 'center'
  width: 400px;
  margin:auto;
}

<form class="form1" action="/">
  <fieldset>
    <legend>Formulário 1</legend>
    Nome:<br>
    <input type="text" name="nome">
    <br>
    Email:<br>
    <input type="email" name="email" >
    <br><br>
    <input type="submit" value="Enviar">
  </fieldset>
</form>

Answer 2

Use the tag fieldset

Definition and usage: A tag <fieldset> is used to group elements related on a form.

The tag <fieldset> draws a box around the elements related.

Tip: The tag <legend> sets a label for the widget <fieldset>.

Settings CSS default: Most browsers will display the element <fieldset> with the following standard values. Source

fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
}

Example

legend {
  border: 2px;
  text-align:center;
}

<form>
  <fieldset>
    <legend>Dados Pessoais:</legend>
    Nome: <input type="text"><br>
    Email: <input type="text"><br>
    Nascimento: <input type="text">
  </fieldset>
</form>

Answer 3

A way of doing using div:

.title_box {
  border: black 2px solid;
}

.title_box #title {
  position: relative;
  top: -0.5em;
  margin-left: 1em;
  display: inline;
  background-color: white;
}

.title_box #content {}

<div class="title_box" id="subject">
  <div id="title">Filtro de disciplina</div>
  <div id="content">
    TEXT.<br>
  </div>
</div>