[CSS]要素に枠線をつけるプロパティ

枠線をつけるプロパティには、以下3つがあります。

• border-color
• border-width
• border-style

border-color

border-colorは、枠線の色を決めるプロパティです。値には色の名称かカラーコードを指定します。

border-color:red;

border-width

border-widthは、枠線の幅を決めるプロパティです。値は、pxやem等の数値で指定する方法とthin（細い）、medium（普通）、thick（太い）のうち、いずれかのキーワードを指定する方法があります。キーワードで指定する場合は、実際に表示される太さはブラウザによって異なりますので、注意してください。

border-width:3px;

border-style

border-styleは、枠線のスタイルを決めるプロパティです。指定できる値は下記の通りで、指定する数によって表示が異なります。

値の数による挙動

1つ指定：上下左右がそのスタイルになる
2つ指定：1つ目が上下、2つ目が左右のスタイルになる
3つ指定：1つ目が上、2つ目が左右、3つ目が下のスタイルになる
4つ指定：1つ目が上、2つ目が右、3つ目が下、4つ目が左のスタイルになる

指定できる値

none：枠線は表示されず、太さも0になる
hidden：枠線は表示されず、太さも0になる。表のセルなどの枠線が重なり合う場合はhiddenの値が優先される
solid：1本線
double：2本線
groove：立体的に窪んだ線
ridge：立体的に隆起した線
inset：上と左の枠線が暗く、下と右の枠線が明るい
outset：上と左の枠線が明るく、下と右の枠線が暗い
dashed：破線
dotted：点線

border-style:solid;

なお、枠線のプロパティもbackgroundと同様に、borderというプロパティでまとめて指定することができます。値はそれぞれ半角スペースで区切って記述すればOKです。また、指定しなくていい値は、記述しなければ指定なしとなります。

上記で出てきた例をひとまとめにすると、、、

border:blue 3px solid;

このようになります。

枠線のプロパティはよく使いますので、ぜひ覚えてください。