CSSボーダーのプロパティ
CSSのborderプロパティは、要素の境界線のスタイル、幅、および色を指定することができます。
この要素は、15ピクセル広いと緑のある溝の境界線を持っています。
境界線のスタイル
border-styleプロパティが表示する境界線の種類を指定します。
次の値が許可されています：
-
dotted-点線の境界線を定義します -
dashed-点線の境界線を定義します -
solid-固体の境界線を定義します -
double-二重枠を定義します -
groove- 3D溝の境界線を定義します。 効果はボーダー色の値に依存します -
ridge- 3D畝状境界線を定義します。 効果はボーダー色の値に依存します -
inset- 3Dのインセットの境界線を定義します。 効果はボーダー色の値に依存します -
outset- 3D当初の境界線を定義します。 効果はボーダー色の値に依存します -
none-境界線を定義していません -
hidden-隠された境界線を定義します
border-styleプロパティは、1〜4個の値から（上の境界、右境界、下境界線、および左ボーダーのために）を持つことができます。
例
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}結果：
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
»それを自分で試してみてください  | 注：しない限り、後述する他のCSSのボーダープロパティのどれも何の効果もありませんborder-styleプロパティが設定されています！ |
|---|
境界線の幅
border-widthプロパティは、4つの境界線の幅を指定します。
幅は、特定のサイズ（のように設定することができるpx, pt, cm, em薄い媒体、または厚い：等）又は三事前定義された値のいずれかを使用して。
border-widthプロパティは、1〜4個の値から（上の境界、右境界、下境界線、および左ボーダーのために）を持つことができます。
例
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
»それを自分で試してみてください 境界線の色
border-color性は、4つの境界線の色を設定するために使用されます。
色はによって設定することができます。
- name -のように、色名を指定して"red"
- Hex -のように、進値を指定する"#ff0000"
- RGB -のように、RGB値を指定して"rgb(255,0,0)"
- transparent
border-colorプロパティは、1〜4個の値から（上の境界、右境界、下境界線、および左ボーダーのために）を持つことができます。
場合はborder-color設定されていない、それは要素の色を継承します。
例
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} »それを自分で試してみてください ボーダー - 各辺
あなた上記の例から、それぞれの側に異なる境界線を指定することが可能であることを見てきました。
CSSでは、ボーダー（上、右、下、左）のそれぞれを指定するためのプロパティもあります。
例
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} »それを自分で試してみてください 上記の例では、これと同じ結果を与えます：
だから、ここでそれがどのように動作するかです：
場合border-styleプロパティには4つの値があります。
- border-style ：点在固体ダブル破線;
- 上部の境界線が点在しています
- 右側の境界線が固体であります
- 下の境界はdoubleです
- 左の境界線が破線れます
場合border-styleプロパティには、3つの値があります。
- border-style ：点在固体ダブル。
- 上部の境界線が点在しています
- 左右の境界は固体であります
- 下の境界はdoubleです
場合border-styleプロパティは、2つの値があります。
- border-style ：固体点在。
- 上部と下部の境界が点在しています
- 左右の境界は固体であります
場合border-styleプロパティが1の値を持ちます。
- border-style ：点在。
- すべての4つの境界線が点在しています
border-styleプロパティは、上記の例で使用されています。 しかし、それはまたで動作するborder-widthとborder-color 。
ボーダー - 速記プロパティ
あなたは上記の例からわかるように、国境を扱う際に考慮すべき多くのプロパティがあります。
コードを短くするためには、一つの特性のすべての個々の境界プロパティを指定することも可能です。
borderプロパティは、次の個々のボーダープロパティの簡略記述特性であります：
-
border-width -
border-style（必須） -
border-color
その他の例
1宣言内のすべての上部の境界線のプロパティ
この例では、1つの宣言でトップボーダーのためのすべてのプロパティを設定するための簡略記述特性を示しています。
下の境界線のスタイルを設定します。
この例では、下側の境界線のスタイルを設定する方法を示します。
左境界線の幅を設定します。
この例では、左境界線の幅を設定する方法を示します。
4境界線の色を設定します。
この例では、4つの境界線の色を設定する方法を示します。 これは、1から4色にすることができます。
右側の境界線の色を設定します。
この例では、右側の境界線の色を設定する方法を示します。
練習で自分自身をテスト！
すべてのCSSボーダーのプロパティ
| プロパティ | 説明 |
|---|---|
| border | 1宣言内のすべての境界プロパティを設定します。 |
| border-bottom | 1宣言内のすべての下の境界プロパティを設定します。 |
| border-bottom-color | 下の境界線の色を設定します。 |
| border-bottom-style | 下境界線のスタイルを設定します |
| border-bottom-width | 下境界線の幅を設定します。 |
| border-color | 4境界線の色を設定します |
| border-left | 1宣言内のすべての左の境界線プロパティを設定します。 |
| border-left-color | 左の境界線の色を設定します。 |
| border-left-style | 左境界線のスタイルを設定します |
| border-left-width | 左境界線の幅を設定します。 |
| border-right | 1宣言内のすべての右境界線のプロパティを設定します。 |
| border-right-color | 右側の境界線の色を設定します。 |
| border-right-style | 右側の境界線のスタイルを設定します |
| border-right-width | 右側の境界線の幅を設定します。 |
| border-style | 4境界線のスタイルを設定します |
| border-top | 1宣言で全ての上部の境界線のプロパティを設定します。 |
| border-top-color | 上罫線の色を設定します。 |
| border-top-style | 上部の境界線のスタイルを設定します |
| border-top-width | 上部の境界線の幅を設定します。 |
| border-width | 4境界線の幅を設定します |