このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-style”プロパティ:境界線の見た目

記事Oct. 25th,2020
境界線の見た目を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

border-style”プロパティは要素の境界線の見た目を指定する以下のプロパティの一括指定プロパティです。

サンプルコード

div { border-style: dotted;}

説明
<line-style>”値
none 境界線を表示せず、境界線の太さや色の指定は無視されます (border-collapse: collapse;の場合に重なる境界線があればその境界線が表示されます。)
hidden 境界線を表示せず、境界線の太さや色の指定は無視されます (border-collapse: collapse;の場合に重なる境界線も表示されません。)
dotted 点線
dashed 破線
solid 実線
double 二重線
groove 溝のように見える線
ridge 出っ張りのように見える線
inset 境界線の中身が沈み込んでいるように見える線 (border-collapse: collapse;の場合は“ridge”とみなされます。)
outset 境界線の中身が出っ張っているように見える線 (border-collapse: collapse;の場合は“groove”とみなされます。)
他の値
共通キーワード

値の指定方法

値が1つの場合は4つすべての辺の境界線の見た目となります。

div { border-style: 〚境界線の見た目〛;}

また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する辺が変わります。

  • 2つの場合は1つ目の値が上下、2つ目の値が左右の辺に適用されます。
  • 3つの場合は1つ目の値が上、2つ目の値が左右、3つ目の値が下の辺に適用されます。
  • 4つの場合は1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左の辺に適用されます。
border-style: 〚すべての辺〛;
border-style: 〚上下〛 〚左右〛;
border-style: 〚上〛 〚左右〛 〚下〛;
border-style: 〚上〛 〚右〛 〚下〛 〚左〛;

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
border-style
定義あり

定義あり

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
none
定義あり

定義あり

定義あり
dotted
定義あり

定義あり

定義あり
dashed
定義あり

定義あり

定義あり
solid
定義あり

定義あり

定義あり
double
定義あり

定義あり

定義あり
groove
定義あり

定義あり

定義あり
ridge
定義あり

定義あり

定義あり
inset
定義あり

定義あり

定義あり
outset
定義あり

定義あり

定義あり
hidden
定義なし

定義あり

定義あり

使用例

境界線の見た目を指定する

div { border-style: none;}
border-style: none;
div { border-style: hidden;}
border-style: hidden;
div {
border-width: 5px;
border-style: dotted;
}
border-style: dotted;
div {
border-width: 5px;
border-style: dashed;
}
border-style: dashed;
div {
border-width: 5px;
border-style: solid;
}
border-style: solid;
div {
border-width: 5px;
border-style: double;
}
border-style: double;
div {
border-width: 5px;
border-style: groove;
}
border-style: groove;
div {
border-width: 5px;
border-style: ridge;
}
border-style: ridge;
div {
border-width: 5px;
border-style: inset;
}
border-style: inset;
div {
border-width: 5px;
border-style: outset;
}
border-style: outset;

それぞれの辺の境界線の見た目を指定する

div {
border-width: 5px;
border-style: dotted double dashed groove;
}
border-style: dotted double dashed groove;
div {
border-width: 5px;
border-style: dotted double dashed;
}
border-style: dotted double dashed;
div {
border-width: 5px;
border-style: dotted double;
}
border-style: dotted double;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク