枠の途中にタイトルがある囲み枠をHTML・CSSで作る

枠の途中に短文のタイトル、見出しがある囲み枠…。言葉での表現がちょっと難しいですが、よくあるデザインですね。

枠にタイトルが食い込んでいるようなボックスです。

アイキャッチ画像はドラクエ戦闘画面風にしてみましたが（実際にCSSで作ったもののスクショです）、実務においては「注意点」や「ここがポイント！」みたいなコンテンツで使うことが多いのではと思います。