HTML/CSS make specific border according to element

Question

I'm creating my CV website with Bootstrap and I have a question according to border element with <p>.

I have this HTML/CSS part :

.headline {
  position: relative;
  display: inline-block;
  border: 1px solid #252525;
  margin-bottom: 120px;
  color: #252525;
  font: 12px 'PT Sans', sans-serif;
  line-height: 20px;
  text-align: center;
}

<div id="profil" class="container-fluid">
  <div class="row">
    <div class="span12 text-center">
      <div class="headline">
        <p>
          <span> QUI SUIS-JE ? </span>
        </p>
        <h1>MON PROFIL</h1>
      </div>
    </div>
  </div>
</div>

I would like to get something like this :

How I could modify my CSS file in order to get this ?

Thank you !

Answer 1

Use <fieldset> and <legend>

.headline {
  position: relative;
  display: inline-block;
  border: 1px solid #252525;
  margin-bottom: 120px;
  color: #252525;
  font: 12px 'PT Sans', sans-serif;
  line-height: 20px;
  text-align: center;
}

<div id="profil" class="container-fluid">
  <div class="row">
    <div class="span12 text-center">
      <fieldset class="headline">

        <legend> QUI SUIS-JE ? </legend>

        <h1>MON PROFIL</h1>
      </fieldset>
    </div>
  </div>
</div>

Answer 2

Maybe something like this?

.headline {
  position: relative;
  display: inline-block;
  border: 1px solid #252525;
  margin-bottom: 120px;
  color: #252525;
  font: 12px 'PT Sans', sans-serif;
  line-height: 20px;
  text-align: center;
}

.header {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  transform: translate(-50%, -100%);
  background: #FFFFFF;
}

<div id="profil" class="container-fluid">
  <div class="row">
    <div class="span12 text-center">
      <div class="headline">
        <p class="header">
          <span> QUI SUIS-JE ? </span>
        </p>
        <h1>MON PROFIL</h1>
      </div>
    </div>
  </div>
</div>