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;
サンプル: ブロック要素