borderプロパティ色々

borderプロパティで境界線を書くことができます。BOXモデルではborderはコンテンツ・padding外側、marginの内側に位置するためborderの両側のpx数がwidthにプラスされます。

• border-color 色を指定
• border-style スタイルを指定
• border-width 幅を指定

border-styleのプロパティ

• none 表示しない。主にリセットに使われる
• solid 実線
• dashed 破線
• dotted 点線
• double 二重線
• groove くぼんだ立体線
• ridge 隆起した立体線
• inset 左上が暗く右下が明るい
• outset 左上が明るく右下が暗い

borderプロパティのショートハンド

border: 1px solid #ccc;

例

border: 1px solid #f00

border: 1px dashed #f00

border: 1px dotted #f00

border: 3px double #f00

border: 3px groove #f00

border: 3px ridge #f00

border: 3px inset #f00

border: 3px outset #f00

border-radiusプロパティ

CSS3で追加されたborder-radiusプロパティで角を丸めることができます。

border: 3px ridge #f00;
border-radius:10px;