枠のデザインってシンプルに見えていざ作ろうとなるとスタイルシートが意外とややこしいのでサンプルがあるといいなと、前から思っていました。だから、ここに思いつく限りサンプルを載せてみます。

良かったらみなさんもコピペで時短してください。

ボタンで表示を切り替えてご覧ください。

See the Pen css_frame01 by kenichi (@ken81) on CodePen.

See the Pen css_frame02 by kenichi (@ken81) on CodePen.

See the Pen css_frame03 by kenichi (@ken81) on CodePen.

See the Pen css_frame04 by kenichi (@ken81) on CodePen.

See the Pen css_frame05 by kenichi (@ken81) on CodePen.

See the Pen css_frame06 by kenichi (@ken81) on CodePen.

See the Pen css_frame08 by kenichi (@ken81) on CodePen.

See the Pen css_frame09 by kenichi (@ken81) on CodePen.

See the Pen css_frame10 by kenichi (@ken81) on CodePen.

See the Pen css_frame11 by kenichi (@ken81) on CodePen.

See the Pen css_frame12 by kenichi (@ken81) on CodePen.

See the Pen css_frame07 by kenichi (@ken81) on CodePen.

See the Pen css_frame13 by kenichi (@ken81) on CodePen.

See the Pen css_frame14 by kenichi (@ken81) on CodePen.

See the Pen css_frame15 by kenichi (@ken81) on CodePen.

See the Pen css_frame16 by kenichi (@ken81) on CodePen.

See the Pen css_frame17 by kenichi (@ken81) on CodePen.

See the Pen css_frame18 by kenichi (@ken81) on CodePen.

See the Pen css_frame19 by kenichi (@ken81) on CodePen.

See the Pen css_frame20 by kenichi (@ken81) on CodePen.

See the Pen css_frame21 by kenichi (@ken81) on CodePen.

See the Pen css_frame22 by kenichi (@ken81) on CodePen.

See the Pen css_frame23 by kenichi (@ken81) on CodePen.

See the Pen css_frame24 by kenichi (@ken81) on CodePen.

See the Pen css_frame25 by kenichi (@ken81) on CodePen.

See the Pen css_frame26 by kenichi (@ken81) on CodePen.

以上がタイトル付きボックスデザインサンプルでした。