how to make a border like this - html

Question

I need to make a border like
with html and css. I tried to do it with display table, with visibility hidden, but none of it worked!
<div id="border">
<div id="visible">
<p id="yellow">Просто выберите, что Вам нужно</p>
</div>
</div>
#yellow { color: #dbff12; }
#border { border: 30px solid black; visibility: hidden; }
#visible { position: relative; bottom: 50px; visibility: visible; }
upd: what I mean is that I need a two hollow places around yellow text like on a picture

Answer 1

In this case it's convenient to use fieldset element with associated legend:
fieldset {
border: 4px green solid;
}
fieldset legend {
padding: 0 10px;
}
<fieldset>
<legend>Просто выберите, что вам нужно</legend>
<div>
Оформить тендер и т.п.
</div>
</fieldset>

Answer 2

Try This:
fieldset {
width: 300px;
border:3px solid skyblue;
}
legend {
color: orange;
padding: 0 10px;
}
span {
border-bottom: 1px dashed;
margin-right: 50px;
}
<fieldset>
<legend>Просто выберите, что Вам нужно</legend>
<span>Other Text</span>
<span>Other Text</span>
</fieldset>

Answer 3

You could also use a real title, flex to draw the top borders and the other borders from the container itself....
html {
min-height: 100%;
background: linear-gradient(to top left, rgba(0, 0, 0, 0.3), rgba(0, 125, 255, 0.5)), url(http://lorempixel.com/800/600/people/9) top center / cover;
}
[data-fieldset] {
width: 600px;
font-size: 20px;
color: rgba(15, 215, 255, 0.9);
text-shadow: 1px 1px 1px black;
margin: 4em auto 1em;
padding: 1em;
/* prepare border */
border: solid 10px rgba(15, 215, 255, 0.4);
border-top: none;
}
[data-fieldset] h1 {
font-size: 40px;
height: 40px;
line-height: 40px;
/* reset in position title */
margin: -35px -20px 1em;
/* prepare the pseudo behavior */
display: flex;
align-items: center;
color: rgba(255, 215, 16, 0.7);
}
/* draw the tops border via pseudo flex children */
[data-fieldset] h1:before,
[data-fieldset] h1:after {
content: '';
flex: 1;
background: rgba(15, 215, 255, 0.4);
height: 10px;
}
/* give some space to text */
[data-fieldset] h1:before {
margin-right: 0.5em;
}
[data-fieldset] h1:after {
margin-left: 0.5em;
}
<div data-fieldset>
<h1>My example</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</div>