как сделать рамку как на скриншоте?
я смог добавить полосы слева и справа заголовка, но не могу объединить в одно целое
.about {
background-color: #fff;
padding-top: 100px;
}
.about__title {
font-size: 30px;
overflow: hidden;
}
.about__title::before, .about__title::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 100%;
height: 1px;
background: #000;
border: solid #fff;
border-width: 0px 50px;
overflow: hidden;
}
.about__title::before {
margin-left: -100%;
}
.about__title::after {
margin-right: -100%;
}
.about__subtitle {
font-size: 16px;
}
.container {
max-width: 850px;
margin: 0 auto;
text-align: center;
}
.wrapper {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
<div class="about">
<div class="container">
<div class="wrapper">
<p class="about__title title">ABOUT US</p>
<p class="about__subtitle"> Our approach unifies design, development and product management to create exceptional products. We start each project by understanding your business goals, the user’s needs and the product requirements. Then we help translate them into effective and elegant solutions.
</p>
</div>
</div>
</div
<fieldset> <legend>