ほんっとにはじめての HTML5 と CSS3

border（ボーダー）は、サイズ（線の太さ）だけでなく 線のスタイルや 色も指定できます。
ですのでショートハンドプロパティもたくさんあって、ちょっとだけ複雑。でも難しくはありません。

ボーダーの指定をするには、ボーダーに用意されている全部のプロパティと値を知る必要があるので、今回は基本からみっちりと見ていきましょう。

1. border について
   1. border-style さえあればボーダーが表示される
   2. borderのプロパティ一覧
2. スタイルを指定（border-styleの値）
   1. border-style のショートハンド
3. 太さを指定（border-widthの値）
   1. border-width のショートハンド
4. 色を指定（border-colorの値）
   1. border-color のショートハンド
5. 上下左右全部同じボーダーの場合のショートハンド
6. 上下左右のボーダーを別々に指定する場合のショートハンド
7. （おまけ）borderを使って小ちゃい三角形を作る

border について

border は、ボックスの外側につく枠線です。

border も上下左右にありますので
border-top　border-bottom　border-left　border-right という4つのプロパティがあります。これらはショートハンドプロパティと言われるもので、スタイル・太さ・色をまとめて指定できます。

「スタイル」「太さ」「色」を指定する基本の3つのプロパティ border-style　border-width　border-color があります。これもショートハンドプロパティで、4つ（上下左右）のボーダーが全て同じ場合にまとめて指定できます。

最後に borderというショートハンドプロパティがあります。これは、4つ（上下左右）のボーダーがすべて同じスタイル・太さ・色の場合に全部まとめて指定するモノ。

これらのショートハンドプロパティの関係をまとめてみたのがこちらの図。
これは、上下左右のボーダーが全部同じ場合のショートハンドです。
（上下左右全部同じなら border プロパティで1つにまとめられるという例です）

border-style さえあればボーダーが表示される

ボーダーは、border-style さえ指定すれば表示されます。
border-style が要（かなめ）だってことをぜひ覚えておこう。

スタイルには、実線・点線・破線・二重線などがあります。（サンプルは後ほど）
border-style だけ指定された場合、太さ（border-width）と色（border-color）はデフォルト値になります。

太さ（border-width）のデフォルト値は medium（3px）
色（border-color）のデフォルト値は currentColor（要素のcolor（=文字色））

サンプルです。border-style を指定しただけでボーダーが出現します♪

HTMLはこちら。CSSも一緒に書いています。

<p>サンプルです。border-style を指定しただけでボーダーが出現♪</p>
<style>
p {
	color: green;   /*←この文字色が、border-color のデフォルトになります*/
	border-style: solid;  /*←border-style だけしか指定していません*/
	margin:2em 0;
	text-align:center;
	line-height:3em;}
</style>

border-style のデフォルト値は、 none（無し）です。
要素に　border-style を特に指定しなければ、ボーダーは無しになります。
なので、ボーダー指定されている要素を ボーダー無しにしたいときは、border-style: none を指定します。（border-style: hidden でも同じ結果になります）

borderのプロパティ一覧

borderは、上・下・左・右と、スタイル・太さ・色を指定するプロパティがあるので、marginやpaddingと比べたら、いっぱいプロパティがあります。

というわけで、まずは borderに関するプロパティを一覧にしてみました。
青字になっているのがショートハンドプロパティです。

線のスタイル （style）	border-top-style	上のスタイル
	border-right-style	右のスタイル
	border-bottom-style	下のスタイル
	border-left-style	左のスタイル
	border-style	上下左右のスタイルの ショートハンドプロパティ 上下左右のスタイルが全部同じ場合、これでまとめる。
線の太さ （width）	border-top-width	上の太さ
	border-right-width	右の太さ
	border-bottom-width	下の太さ
	border-left-width	左の太さ
	border-width	上下左右の太さの ショートハンドプロパティ 上下左右の太さが全部同じ場合、これでまとめる。
線の色 （color）	border-top-color	上の色
	border-right-color	右の色
	border-bottom-color	下の色
	border-left-color	左の色
	border-color	上下左右の色の ショートハンドプロパティ 上下左右の色が全部同じ場合、これでまとめる。
スタイル・ 太さ・ 色をまとめる ショートハンド プロパティ	border-top	上の線の ショートハンドプロパティ 上の線のスタイル・太さ・色をまとめて指定。
	border-right	右の線の ショートハンドプロパティ 右の線のスタイル・太さ・色をまとめて指定。
	border-bottom	下の線の ショートハンドプロパティ 下の線のスタイル・太さ・色をまとめて指定。
	border-left	左の線の ショートハンドプロパティ 左の線のスタイル・太さ・色をまとめて指定。
	border	上下左右全部の ショートハンドプロパティ 上下左右の線のスタイル・太さ・色をまとめて指定。

上記の他にも、borderがらみのプロパティがあります。

● border-image（線に画像を使用）
borderに画像を使えます。こちらは次回やります。今回長過ぎるので。

● border-collapse と border-spacing（テーブル専用）
これは、table関連の専用プロパティです。
border-collapseは、テーブルセルのボーダーをくっつけるか空けるか指定。
border-spacingは、テーブルセルやテーブルのボーダーどうしの間隔を数値で指定します。
（これらはいずれ、テーブル専用のCSSでまとめます）

● border-radius（ボックスの角丸）
こちらは [18-1] CSS3で、ボックス要素を角丸にしよう（border-radius）
で詳しくメモっていますので、ご覧ください。

では、borderの「スタイル・太さ・色」の指定に使える「値」を順に見ていきましょう。

スタイルを指定（border-styleの値）

border-styleプロパティで borderのスタイルを指定するだけで borderは表示されます。
border-styleだけしか指定していなければ、太さはデフォルトのmedium（3px）、色はデフォルトのcurrentColor（要素のcolorプロパティの色 = 文字色）になります。
というわけで、borderを指定したいなら、border-styleは必須。
ほかの border-color、border-width は無くてもデフォルト表示されるというわけです。

border-style の値 には以下のものがあります。

none	borderは無し。これがデフォルト値です。 borderを付けたい時はこの none（とhidden）以外の値を指定します。
hidden	borderは非表示。太さを指定しても領域そのものが無くなり、noneと同じ結果です。
solid	実線
dotted	点線
dashed	破線
double	二重線。3px以上の太さにしないと二重線に見えません。
groove	線がくぼんで見える。2px以上の太さが必要です。
ridge	線が盛り上がって見える。2px以上の太さが必要です。
inset	上と左、右と下の線の濃度を変えて、ボックスをくぼんで見えるようにします。
outset	上と左、右と下の線の濃度を変えて、ボックスを盛り上がって見えるようにします。

値の継承	なし	適用できる要素	全部

プレビューです。
border-style 以外は無指定なので、太さはデフォルトの3px、
色はcurrentColor = 文字色（本ブログでは#666）です。

HTMLはこちら。CSSも一緒に書いています。

<div>
  <p style="border-style:none">border-style: none</p>
  <p style="border-style:solid">border-style: solid</p>
  <p style="border-style:dotted">border-style: dotted</p>
  <p style="border-style:dashed">border-style: dashed</p>
  <p style="border-style:double">border-style: double</p>
  <p style="border-style:groove">border-style: groove</p>
  <p style="border-style:ridge">border-style: ridge</p>
  <p style="border-style:inset">border-style: inset</p>
  <p style="border-style:outset">border-style: outset</p>

  <style>
  div {padding:0; margin:0; border:solid 1px #ccc;}
  div p {margin:2em; text-align:center; line-height:2em;}
  </style>
</div>

groove, ridge, inset, outset は、上のサンプルでは単なる実線に見えます。この4つは、線の色が濃すぎたり幅が狭いと立体的に見えないんです。
色や幅を変えるとこんな感じ。（色はskyblue、幅は10pxで指定しています）

border-style のショートハンド

border の上下左右のスタイルを別々に指定することもできます。
上のサンプルでも使っているborder-styleショートハンドプロパティを使います。
ルールは、margin や padding のときと同じです。

HTMLはこちら。CSSも一緒に書いています。

<div>
  <p style="border-style:solid">値が１つで「上下左右」全部同じ</p>
  <p style="border-style:dotted solid">値が2つで「上下」「左右」</p>
  <p style="border-style:dotted outset dashed">値が3つで「上」「左右」「下」</p>
  <p style="border-style:dotted solid groove double">値が4つで「上」「右」「下」「左」</p>
  <p style="border-style:none none none solid">border-style:noneを使った例</p>

  <style>
  div {padding:0; margin:0; border:solid 1px #ccc;}
  div p {margin:2em; text-align:center; line-height:2em;}
  </style>
</div>

太さを指定（border-widthの値）

太さの指定には border-widthプロパティを使います。
border-width の値 には以下のものがあります。

medium	デフォルト値。太さの指定が無ければ、自動的にこの値になります。 メディウム（中くらい）の太さって意味ですが、3pxです。
thin	ティン（細い）って意味。1px。
thick	ティック（太い）って意味。5px。
数値	数値に単位を付けて、相対値や絶対値で指定します。（2px とか 0.5em とか） ＊%での指定はできません（%で指定するとデフォルトの medium になります） ＊0やマイナスの数値は指定できません

値の継承	なし	適用できる要素	全部

各「値」のプレビューです。
border-style は solid にしています。
色は指定していないのでデフォルトのcurrentColor = 文字色（本ブログでは#666）です。

HTMLはこちら。CSSも一緒に書いています。

<div>
  <p>border-widthの指定無し（デフォルトのmediumになります）</p>
  <p style="border-width:medium">border-width: medium</p>
  <p style="border-width:3px">border-width: 3px</p>
  <p style="border-width:thin">border-width: thin</p>
  <p style="border-width:1px">border-width: 1px</p>
  <p style="border-width:thick">border-width: thick</p>
  <p style="border-width:5px">border-width: 5px</p>
  <p style="border-width:0.5em">border-width: 0.5em</p>
  <p style="border-width:1vmin">border-width: 1vmin</p>

  <style>
  div p {border-style:solid;}  /*←ここで border-styleを指定しています*/
  </style>
</div>

border-width のショートハンド

border-width のショートハンドも、margin や padding のときと同じルールです。

HTMLはこちら。CSSも一緒に書いています。

<div>
  <p style="border-width:thin">値が１つで「上下左右」全部同じ</p>
  <p style="border-width:thin medium">値が2つで「上下」「左右」</p>
  <p style="border-width:thin medium thick">値が3つで「上」「左右」「下」</p>
  <p style="border-width:thin medium thick 8px">値が4つで「上」「右」「下」「左」</p>

  <style>
  div p {border-style:solid;}  /*←ここで border-styleを指定しています*/
  </style>
</div>

色を指定（border-colorの値）

色の指定には border-colorプロパティを使います。
border-color の値 は、CSSでの色指定の値が全部使えます。
その他、以下の値があります。

transparent	透明。rgba(0,0,0,0)と同じです。
currentColor	これがデフォルト。要素のcolorプロパティの値（文字色）になります。 （これは別にこのプロパティだけじゃなく、色指定できる全プロパティに使える値です）

値の継承	なし	適用できる要素	全部

デフォルト値はcurrentColorなので、ボーダーの色指定をしなければ要素の文字の色になります。

各「値」のプレビューです。
border-style は solid に、border-width は無指定なのでデフォルトのmediumです。

HTMLはこちら。CSSも一緒に書いています。

<div>
  <p>border-colorの指定無し（デフォルトのcurrentColor（文字色）になります）</p>
  <p style="border-color:currentColor">border-color: currentColor</p>
  <p style="border-color:transparent">border-color: transparent（透明）</p>
  <p style="border-color:#000">border-color: #000</p>
  <p style="border-color:#adff2f">border-color: #adff2f</p>
  <p style="border-color:hotpink">border-color: hotpink</p>
  <p style="border-color:rgba(0,191,255,0.7)">border-color: rgba(0,191,255,0.7)</p>
  <p style="border-color:hsla(90,100%,20%,0.5)">border-color: hsla(90,100%,20%,0.5)</p>

  <style>
  div p {border-style:solid;}  /*←ここで border-styleを指定しています*/
  /*border-widthは指定していないので、デフォルトのmediumになってます*/
  </style>
</div>

border-color のショートハンド

border-color のショートハンドも、margin や padding のときと同じルールです。

HTMLはこちら。CSSも一緒に書いています。

<div>
  <p style="border-width:thin">値が１つで「上下左右」全部同じ</p>
  <p style="border-width:thin medium">値が2つで「上下」「左右」</p>
  <p style="border-width:thin medium thick">値が3つで「上」「左右」「下」</p>
  <p style="border-width:thin medium thick 8px">値が4つで「上」「右」「下」「左」</p>

  <style>
  div p {border-style:solid;}  /*←ここで border-styleを指定しています*/
  /*border-widthは指定していないので、デフォルトのmediumになってます*/
  </style>
</div>

上下左右全部同じボーダーの場合のショートハンド

ボーダーの上下左右の「スタイル・太さ・色」を全部同じにしたいなら、
ショートハンドプロパティ border を使います。

border: スタイル（半角スペース）太さ（半角スペース）色と、
値を「半角スペース」で区切ってまとめます。
値は順不同。好きな順番でOK。

HTMLはこちら。CSSも一緒に書いています。

<div>
  <p style="border:#adff2f solid 0.5em">border:#adff2f solid 0.5em</p>
  <p style="border:dotted 2px hotpink">border:dotted 2px hotpink</p>
  <p style="border:1ex double rgba(0,191,255,0.7)">border:1ex double rgba(0,191,255,0.7)</p>
  <p style="border:outset 12px hsla(90,100%,20%,0.5)">border: outset 12px hsla(90,100%,20%,0.5)</p>

  <style>
  div p {margin:2em; text-align:center; line-height:2em;}
  </style>
</div>

また、style以外は省略可。3つ全部書く必要はありません。省略された値はデフォルト値になります。
例えば、
border:solid だけでもOK。ボーダーは実線で、幅はデフォのmedium（3px）色はcurrentColor（文字色）になります。
border:solid 5em でも可。色はデフォルトになります。
border:#ccc solid でも可。太さだけデフォルトです。
というわけで、border:none もアリ。ボーダー指定している要素だけど、ココだけボーダー無しにしたい時にはコレで。

上下左右のボーダーを別々に指定する場合のショートハンド

上の borderショートハンドプロパティだけだと、上下左右同じボーダーです。
ここで「左のボーダーだけ変えたい」と言う場合には、border-leftショートハンドプロパティを使います。
上ならborder-top、右ならborder-right、下ならborder-bottomを使います。
このときも「スタイル、太さ、色」を順番は自由に半角スペースで区切って使います。
「スタイル」以外の値は省略も可能。色や太さは変更したいモノだけ指定します。

使いどころですが、
例えば「左のボーダーの太さだけ変えたい」時だったら、
基本をborderショートハンドプロパティで指定した後で、border-left-widthプロパティだけ追加して、左の太さだけ上書きしたほうが手っ取り早い。
こんなかんじで、ショートハンドプロパティを組み合わせてシンプルに書こう。

サンプルで見てみましょう。

HTMLはこちら。CSSも一緒に書いています。

<div>
  <p id="sample1">左の<b>太さだけ</b>変えた場合</p>
  <p id="sample2">左の<b>太さも色も</b>変えた場合</p>
  <p id="sample3"><b>左と下だけ</b>ボーダーを指定した場合</p>

  <style>
  div p {margin:2em; text-align:center; line-height:2em;}

  div p#sample1 {
	  border:solid 1px #999;    /*まず上下左右に同じボーダー指定*/
	  border-left-width:15px;}  /*左の太さだけ上書き指定しています*/
    
  div p#sample2 {
	  border:solid 1px #999;         /*まず上下左右に同じボーダー指定*/
	  border-left:solid 2em olive;}  /*左のボーダーを丸ごと書き換え。このほうが効率的です*/
    
  div p#sample3 {
	  border-left:solid 2em #db7093;     /*左のボーダーだけ指定*/
	  border-bottom:dotted 1px #db7093;} /*下のボーダーだけ指定*/
  </style>
</div>

（おまけ）borderを使って小ちゃい三角形を作る

borderを使ったTIPSです。
幅も高さも無い要素のボーダーの上下左右の色を変えると、このように表示されます。
それぞれのボーダーが三角形に見えますね。

CSSはこちら。

div#smp6 {
	padding:0;
	width:0;
	height:0;
	border-top:10px solid red;
	border-right:10px solid silver;
	border-left:10px solid silver;
	border-bottom:10px solid red;}

この性質を利用して、このように三角形を作ることができます。
このサンプルは、border-topに色指定し、左右のボーダーは透明（transparent）にしています。

CSSはこちら。

div#smp61 {
	padding:0;
	width:0;
	height:0;
	border-top:15px solid red;
	border-right:10px solid transparent;
	border-left:10px solid transparent;}

右向きの三角形もこんなかんじで。border-leftだけ色を付けてます。
わざわざ画像を用意しなくても、borderだけで三角形が表示できるので便利ですね。

CSSはこちら。

div#smp62 {
	padding:0;
	width:0;
	height:0;
	border-left:15px solid red;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;}

このTIPSを使って、要素のはじっこに小さい三角形を表示して「ふきだし」のように見せることもできます。
作り方はこちら↓に書いています。擬似要素「::after」も一緒に使います。
CSSのセレクタ「擬似要素 :after」で「ふきだし」を作ってみた | ＊Web Design 覚え書き＊

次回予告

次回は、border-image プロパティです。
CSS3からが登場した border-image は、ボックスのボーダーに画像を表示できます。
画像を額縁のように簡単に使えるし、ボーダーの領域だけじゃなく、真ん中（要素の padding やコンテンツの部分）にも画像を背景のように敷くことができて、とっても便利なプロパティです。

関連記事

• 【15-5】backgroundのショートハンド まとめ
• 【15-4】background関連のプロパティ（4/4　clip と origin）
• 【15-3】background関連のプロパティ（3/4　background-size）
• 【15-2】background関連のプロパティ（2/4　background-position）
• 【15-1】background関連のプロパティ（1/4）
• 【14】borderとよく似た outlineはレイアウトを崩さない
• 【13-2】border-imageと border-imageのショートハンド
• 【13-1】borderと borderのショートハンド
• 【12】paddingと paddingのショートハンド
• 【11-4】marginの相殺（margin collapsing）
• 【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）
• 【11-2】marginの auto という値の「？」を解決しておこう
• 【11-1】marginと marginのショートハンド
• 【10】ボックスモデル（margin, padding, border を使いこなそう）
• 【9】HTML要素の インラインレベル・ブロックレベル について