css3で作る、タイトル付きの枠線で囲むボックス表示です。
タイトルは上の線に重なるような表現です。
◆html
<div class="textBox">タイトル付きの枠で囲まれたテキスト表示になります</div>
◆css
.textBox {
border: 2px solid #333;
border-radius: 5px;
padding: 30px;
position: relative;
}
.textBox::before {
background-color: #fff;
color: #333;
content: "TOPICS";
font-weight: bold;
left: 30px;
padding: 3px 10px;
position: absolute;
top: -15px;
}