CSS ボーダー

❮ 前章へ 次章へ ❯

CSS Borderプロパティ

CSS border プロパティは、要素のボーダーのスタイルや幅、色の指定を可能にします。

この要素には、15ピクセルの幅と緑の groove ボーダーが設定されています。

ボーダー・スタイル

border-style プロパティは、表示するボーダーの種類を指定します。

次の値が指定可能です：

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. 効果は border-color 値に依存する.

A ridge border. 効果は border-color 値に依存する.

An inset border. 効果は border-color 値に依存する.

An outset border. 効果は border-color 値に依存する.

No border.

A hidden border.

A mixed border.

Try it Yourself ❯

注:border-style プロパティが設定されていない限り、後述する他の CSS ボーダーのプロパティはいずれも効果がありません！

ボーダーの幅

border-width プロパティは、ボーダーの幅を指定します。

幅は、サイズを (px、pt、cm、em などで) 指定するか、または予約語 thin、medium、thick の 1 つを使用して設定します：

注: "border-width" プロパティは、単独で使用しても動きません。 最初に、"border-style" プロパティを使用してボーダーを設定します。

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;
}
Try it Yourself ❯

ボーダーの色

border-color プロパティは、4 辺のボーダーの色を設定するために使用します。

色は、次により設定できます:

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;
}
Try it Yourself ❯

ボーダー - 個別の各辺

CSSでは、各辺に異るボーダーの指定をすることができます:

上の例から、それぞれの辺に異なったボーダーを指定することが可能であることを見ました。

CSS では、ボーダー（上、右、下、左）のそれぞれを指定するためのプロパティもあります：

例

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
Try it Yourself ❯

上の例は、次の例と同じ結果になります：

例

p {
    border-style: dotted solid;
}
Try it Yourself ❯

どう動作するかを以下に示します：

border-style プロパティに 4 つの値を指定した場合：

border-style プロパティに 3 つの値を指定した場合：

border-style プロパティに 2 つの値を指定した場合：

border-style プロパティに 1 つの値を指定した場合：

上の例では、border-style プロパティを使用しましたが、border-width や border-colorr でも同左します。

ボーダー - ショートハンド・プロパティ

上記例から分るように、ボーダーを扱う時には、考慮に入れるべき多くのプロパティがあります。

コードを短くするために、1 つのプロパティで個別 border プロパティ全てを指定することも可能です。

border プロパティは、下の各個別 border プロパティを設定するためのショートハンド・プロパティです：

例

p {
    border: 5px solid red;
}
Try it Yourself ❯
Examples

その他の例

全ての上ボーダープロパティを1回で宣言する
この例は、1回の宣言でまとめて上ボーダーの全プロパティを設定するためのショートハンドプロパティのデモです。

下ボーダーのスタイルを設定
この例は、下ボーダーのスタイルを設定する方法のデモです。

左ボーダーの幅を設定
この例は、左ボーダーの幅を設定する方法のデモです。

4つのボーダーの色を設定
この例は、4つのボーダーの色を設定する方法のデモです。1～4色を設定できます。

右ボーダーの色を設定
この例は、右ボーダーの色を設定する方法のデモです。

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯

All CSS Border Properties

プロパティ 説明
border 全ての CSS ボーダープロパティ
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 つのボーダーの幅を設定する

❮ 前章へ 次章へ ❯