グレーの枠(細め)

※枠線のCSSリファレンス:http://www.htmq.com/style/border.shtml

※うまく枠をコピペできない人は、赤字の部分のみコピーし、HTML編集モードでコピペしてみて下さい。

シンプル

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 1px solid #cccccc; padding: 10px;">★</div>

点線(1)

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 1px dashed #cccccc; padding: 10px;">★</div>

点線(2)

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 1px dotted #cccccc; padding: 10px;">★</div>

二重線

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 5px double #cccccc; padding: 10px;">★</div>

立体な感じ

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 5px ridge #cccccc; padding: 10px;">★</div>

くぼんだ感じ

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 1px inset #cccccc; padding: 10px;">★</div>

少しシャドウな感じ

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 1px outset #cccccc; padding: 10px;">★</div>

グレーの枠(太め)

シンプル

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 5px solid #cccccc; padding: 10px;">★</div>

点線(1)

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 5px dashed #cccccc; padding: 10px;">★</div>

点線(2)

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 5px dotted #cccccc; padding: 10px;">★</div>

二重線

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 10px double #cccccc; padding: 10px;">★</div>

立体な感じ

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 10px ridge #cccccc; padding: 10px;">★</div>

くぼんだ感じ

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 5px inset #cccccc; padding: 10px;">★</div>

シャドウな感じ

★ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<div style="border: 5px outset #cccccc; padding: 10px;">★</div>