CSS 枠線

CSS 枠線属性

CSS border 属性は要素の枠線のスタイル、幅、色を指定することができます。

すべての側に枠線があります。

下側に赤い枠線があります。

角が丸い枠線があります。

左側に青い枠線があります。

CSS 枠線スタイル

border-style 属性は表示する枠線の種類を指定します。

以下の値が許可されています：

  • dotted - 点線枠線の定義
  • dashed - 虚線枠線の定義
  • solid - 実線枠線の定義
  • double - 双重枠線の定義
  • groove - 3D 坡口枠線の定義。効果は border-color 値に依存します
  • ridge - 3D 脊線枠線の定義。効果は border-color 値に依存します
  • inset - 3D inset 枠線の定義。効果は border-color 値に依存します
  • outset - 3D outset 枠線の定義。効果は border-color 値に依存します
  • 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;}

結果：

点状の枠線。

点線の枠線。

実線の枠線。

二重線の枠線。

ボックスの溝状の枠線。効果は border-color の値に依存します。

ボックス状の枠線。効果は border-color の値に依存します。

3D inset 枠線。効果は border-color の値に依存します。

3D outset 枠線。効果は border-color の値に依存します。

枠線なし。

枠線を隠す。

混在した枠線。

自分で試してみてください

注意：設定されていない場合には、 border-style 属性が設定されていない場合、他の CSS 枠線属性（次の章で詳細に説明します）は何も効果がありません！