パーツ番号 02-07-08 ・ CSSのみ

枠線囲み見出しバッジ

見出し全体を角丸枠で囲んでバッジのように見せるスタイル。会員限定コンテンツなどの案内見出しに適する。

staticcss

プレビュー

ソースコード

HTML

<div class="box">
          <h4 class="ttl">MEMBERSHIP</h4>
        </div>

CSS

.d02-07-08 .box{ padding:14px 28px; border:2px solid #1f2937; border-radius:10px; }
        .d02-07-08 .ttl{ all:unset; display:block; font-size:18px; font-weight:800; color:#1f2937; letter-spacing:0.06em; }

クラス名 .d02-07-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。