Title

border-styleとは

ここで説明するborder-style とは次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 境界線

style

読み: スタイル
意味: 様式

目次に戻る

border-styleプロパティの概要

このプロパティは要素の境界線の種類を設定することができます。

四辺の境界線の種類を一括指定する他に次に挙げるプロパティの値を一括設定機能を有します。

• border-top-style: 上辺の境界線スタイル
• border-bottom-style: 下辺の境界線スタイル
• border-left-style: 左辺の境界線スタイル
• border-right-style: 右辺の境界線スタイル

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{border-style: 四辺値}
セレクター{border-style: 上下辺値 左右辺値}
セレクター{border-style: 上辺値 左右辺値 下辺値}
セレクター{border-style: 上辺値 右辺値 下辺値 左辺値}

このborder-styleプロパティは次に挙げるプロパティの値を一括指定する機能を有します。

• border-top-style: 上辺の境界線スタイル
• border-bottom-style: 下辺の境界線スタイル
• border-left-style: 左辺の境界線スタイル
• border-right-style: 右辺の境界線スタイル

※ コードの指定辺の値の区切りには半角スペースを使います。

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使用する要素はdiv要素です。div要素の境界線の種類に注目してコードとサンプルを見ていただきたいと思います。

初期値: none

none とは、「無い」という意味で境界線は表示されません。 これは、境界線の種類の初期値であり、指定しない場合はこの値になります。

div{border-style: none;}

目次に戻る

キーワード値: hidden

hidden とは、「隠された」という意味で境界線は表示されません。 表のセルなどのボーダーがかさなり合う場合はこの値が優先されます。

div{
	border-style: hidden;
}

目次に戻る

キーワード値: solid

solid とは、「個体」という意味で1本線で表示されます。

div{
	border-style: solid;
}

目次に戻る

キーワード値: double

double とは、「二重、二層」という意味で2本線で表示されます。

div{
	border-style: double;
}

目次に戻る

キーワード値: groove

groove とは、「溝、くぼみ」という意味で立体的に窪んだ線で表示されます。 サンプルは，見やすくする為に太線で表示しています。

div{
	border-width: 20px;
	border-style: groove;
}

目次に戻る

キーワード値: ridge

ridge とは、「隆起(線)、尾根」などの意味で立体的に隆起した線で表示されます。 サンプルは，見やすくする為に太線で表示しています。

div{
	border-width: 20px;
	border-style: ridge;
}

目次に戻る

キーワード値: inset

inset とは、「挿入、はめ込み」などの意味で上と左のボーダーが暗く、下と右のボーダーが明るく表示されます。 サンプルは，見やすくする為に太線で表示しています。

div{
	border-width: 20px;
	border-style: inset;
}

目次に戻る

キーワード値: outset

outset とは、「初め、発端」などの意味で上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。 サンプルは，見やすくする為に太線で表示しています。

div{
	border-width: 20px;
	border-style: outset;
}

目次に戻る

キーワード値: dashedt

dashed とは、「破線」の意味で破線で表示されます。

div{
	border-style: dashed;
}

目次に戻る

キーワード値: dotted

dotted とは、「点付き、点線入り」の意味で点線で表示されます。

div{
	border-style: dotted;
}

目次に戻る

応用: 四辺の境界線スタイルを個別に指定する

要素の境界線のスタイルは上下左右を個別のスタイルで指定することができます。

このサンプルでは上下の辺と左右の辺を違うスタイルで指定してみたいと思います。 ここでは上下の辺を点線で指定し、左右の辺を二重線で指定しています。

その他の指定方法は、このページの構文のセクションを参照してください。

div{
	border-style: dotted double;
}

目次に戻る

グローバル値

border-styleプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnoneに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{border-style: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-style: none;

border-style: hidden;

border-style: solid;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: inset;

border-style: outset;

border-style: solid double;

border-style: solid double groove;

border-style: solid double none inset;

目次に戻る