I've been scanning the internet for examples like this to learn how to build it, but I can't seem to find anything. Anyone know how to create a border/box like the one in the example? I can get the words to be in between words and the bottom and side borders but I can't connect them.
Example:
You can abuse a fieldset/legend combination
fieldset {
display: block;
margin: 20px auto;
padding: 15px;
border: 0;
border: 1px solid red;
width: 50%;
}
legend {
display: table;
min-width: 0px;
max-width: 70%;
position: relative;
margin: auto;
padding: 5px 20px;
font-size: 20px;
text-align: center;
}<fieldset>
<legend>legend</legend>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae obcaecati dolore eligendi quaerat ad et possimus provident amet magni maiores, corporis, cupiditate omnis maxime dolorum saepe adipisci tempora perferendis optio.</div>
</fieldset>
Position the bordered container relatively and position the label absolutely relating its container. Then set white background to the label.
Draw a border around some kind of element, then put your text element inside that element, center the text element and contain it's width so it only wraps the text itself, then shift it up to overlap the border, and apply a background to the text that matches the background color of your page.
body {
padding: 2em 0;
}
div {
border: 1px solid #ccc;
text-align: center;
}
h1 {
display: inline-block;
margin: 0;
transform: translateY(-50%);
background: #fff;
padding: 0 .5em;
}<div>
<h1>header</h1>
</div>
