境界線（ボーダー）を設定するショートハンド

CSS - border

概要

CSSプロパティ｢border｣は、境界線（ボーダー）の太さ（border-width）、スタイル（border-style）、色（border-color）を、要素の４辺すべてをまとめて指定するショートハンドプロパティです。４辺をそれぞれ指定する場合は border-top, border-bottom, border-left, border-right プロパティを使用します。

<div class="border">3つの値を指定したボーダー要素</div>
<style>
  .border {
    border: 1px solid #000;
  }
</style>

また｢border｣プロパティの種類として他に、ボーダー内に背景を指定する border-image がありますが、こちらのみ、このショートハンド内に記述することはできません。

値の指定方法

順番は順不同でいれることができます。もし、指定をしなかった場合はそのプロパティの初期値が入ります。またその中の｢スタイル｣は、指定をしないと初期値が｢none｣なので、表示がされませんので気をつけましょう。

{ border: 値 スタイル 色 }

値について

指定できる値の種類です。

値	説明
value	単位はpx, emなどが可能です。マイナス値は入れられません
keyword	thin, medium, thickが入ります

スタイルについて

指定できるスタイルは以下の通りです。それぞれの表示は border-style で詳しく解説しています。

値	説明
none	ボーダーは表示されません
solid	一本線のボーダーが表示されます
dotted	１列にならんだドット模様のボーダーが表示されます
dashed	破線のボーダーが表示されます
double	二本線のボーダーが表示されます
groove	立体的で窪んだ線が表示されます
ridge	立体的で隆起した線が表示されます
inset	grooveと似てますが立体的で窪んだ線が表示されます
outset	ridgeと似てますが、立体的で隆起した線が表示されます

色について

指定できる色の種類です。

値	説明
color	色を指定します. #000000やrgb(0,0,0)でも指定できます

プロパティの種類について

｢border｣プロパティは、4辺それぞれに異なった値をいれることができませんが、細分化したプロパティを使用することによって、値を変更することができます（指定可のみ）。それぞれのプロパティをまとめた一覧になりますので確認してみてください。

プロパティ名	４辺一括で指定される内容	細分化プロパティ名
border	ボーダーの太さ、スタイル、色を指定できる	4辺指定可。border-top、border-bottom、border-left、border-right
border-width	太さを指定できる	4辺指定可。border-top-width、border-bottom-width、border-left-width、border-right-width
border-style	スタイルを指定できる	4辺指定可。border-top-style、border-bottom-style、border-left-style、border-right-style
border-color	色を指定できる	4辺指定可。border-top-color、border-bottom-color、border-left-color、border-right-color
border-image	背景を指定できる	4辺指定不可。border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat

実用における注意点

このプロパティで値を指定した後に、それぞれのCSSプロパティ border-width , border-style , border-color を指定し直すと値が上書きされますので、注意が必要です。

<div class="border">3つの値を指定したボーダー要素</div>
<div class="border border-width border-style border-color">3つの値を上書き指定したボーダー要素</div>
<style>
div {
  margin-bottom: 10px;
}
.border {
  border: 1px solid #000;
}
.border-width {
  border-width: 10px;
}
.border-style {
  border-style: double;
}
.border-color {
  border-color: #cdc;
}
</style>

使用例

上記のような上書きされる特徴がありながらも、その性質を利用して共通の値は｢border｣プロパティでまとめて指定しておいて、一部値を別途指定するといった方法もテクニックの一つとしてあります。この例では色を別途指定しています。

<div class="border">共通の値を指定したボーダー要素</div>
<div class="border border-color-1">色だけ上書き指定したボーダー要素</div>
<div class="border border-color-2">色だけ上書き指定したボーダー要素</div>
<div class="border border-color-3">色だけ上書き指定したボーダー要素</div>
<style>
  div {
    margin-bottom: 10px;
  }
  .border {
    border: 5px solid;
  }
  .border-color-1 {
    border-color: #cdc;
  }
  .border-color-2 {
    border-color: #b0e0e6;
  }
  .border-color-3 {
    border-color: #e6b6b0;
  }
</style>