Putting text on an edge

There are 2 ways to solve this:

• Solution 1: Create a div and on the div position the text with a white background to just achieve that effect of "interruption" of the edge. It would be something like this:

div{
    margin-top:20px;
    height:100px;
    width:300px;
    border:2px solid black;
}

h1{
    width: 50px;
    font-size:18px;
    margin-top:-12px;
    margin-left:7px;
    background:white;
}

<div>

    <h1>Titulo</h1>

</div>

With the property width you give the width of the background to the text. The margin-top in negative makes the text superimposed on the edge of the div.

• Solution 2: Use the fieldset and legend tags.

 <fieldset>
  <legend>Titulo</legend>
 </fieldset>

You choose.

What you are looking for is known as "fieldset". It is a concrete element of html. And the text you want to show is a specific tag called "legend".

I'll give you the example here:

<fieldset>
<legend>Tu texto</legend>
<div>Aquí puedes ir rellenandolo con lo que quieras mostrar dentro del fieldset</div>
</fieldset>

As they say in previous answers, the legend tag that you type within the box created by fieldset allows you to write a text on the border.