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

[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;

このようになります。

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

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です