border-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* キーワード値 */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
/* 上下 | 左右 */
border-style: dotted solid;
/* 上 | 左右 | 下 */
border-style: hidden double dashed;
/* 上 | 右 | 下 | 左 */
border-style: none solid dotted dashed;
/* グローバル値 */
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;
border-style
プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。
- 値が 1 つ指定された場合、全 4 辺に同じスタイルが適用される。
- 値が 2 つ指定された場合、1 つ目のスタイルは上下、2 つ目は左右の辺に適用される。
- 値が 3 つ指定された場合、1 つ目のスタイルは上、2 つ目は左右、3 つ目は下の辺に適用される。
- 値が 4 つ指定された場合、スタイルはそれぞれ上、右、下、左の順(時計回り)に適用される。
それぞれの値は以下の一覧にあるキーワードです。
値
<line-style>
-
境界のスタイルを記述します。以下の値を使用することができます。
none
-
hidden
キーワードと同様に、境界線を表示しません。background-image
を設定している場合を除き、プロパティで別に指定していてもborder-width
の同じ辺の計算値は0
になります。テーブルのセルで境界線が collasped 形式である場合は、none
値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。 -
none
キーワードと同様に、境界線を表示しません。background-image
を設定している場合を除き、プロパティで別に指定していてもborder-width
の同じ辺の計算値は0
になります。テーブルのセルで境界線が collasped 形式である場合は、hidden
値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。 dotted
-
連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の
border-width
の計算値の半分です。 dashed
-
短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。
solid
-
1 本の直線、実線を表示します。
double
-
2 本の直線を表示し、幅の合計は
border-width
で定義したピクセル数になります。 groove
-
凹んだように見える境界線を表示します。
ridge
の逆です。 ridge
-
出っ張ったように見える境界線を表示します。
groove
の逆です。 inset
-
要素が埋め込まれて見える境界線を表示します。
outset
の逆です。border-collapse
がcollapsed
に設定されたテーブルのセルに適用すると、この値はridge
のようにふるまいます。 outset
-
要素が出っ張って見える境界線を表示します。
inset
の逆です。border-collapse
をcollapsed
に設定したテーブルセルに適用すると、この値はgroove
のようにふるまいます。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素。 ::first-letter にも適用されます。 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 離散値 |
形式文法
例
プロパティのすべての値
プロパティのすべての値のサンプルです。
HTML
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>
CSS
pre {
height: 80px;
width: 120px;
margin: 20px;
padding: 20px;
display: inline-block;
background-color: palegreen;
border-width: 5px;
box-sizing: border-box;
}
/* border-style の例示用クラス */
.b1 {
border-style: none;
}
.b2 {
border-style: hidden;
}
.b3 {
border-style: dotted;
}
.b4 {
border-style: dashed;
}
.b5 {
border-style: solid;
}
.b6 {
border-style: double;
}
.b7 {
border-style: groove;
}
.b8 {
border-style: ridge;
}
.b9 {
border-style: inset;
}
.b10 {
border-style: outset;
}
結果
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-style |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 境界に関する CSS 一括指定プロパティ:
border
,border-width
,border-color
,border-radius