Home / 枠線の形式の指定 / 上下左右の枠線の形式をまとめて指定 : border-style

上下左右の枠線の形式をまとめて指定 : border-style

::: 書 式 :::
border-style: 上側枠線形式 右側枠線形式 下側枠線形式 左側枠線形式

::: プロパティ値 :::
枠線の形式には、下記の値を指定します。
  • none(初期値)(枠線を非表示にして、太さが0に設定される)
  • hidden (枠線を非表示にして、太さが0に設定される)
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

::: 解 説 :::
border-style」プロパティで、上下左右の枠線の形式を一度に設定できます。

それぞれの値を半角スペースで区切ります。

また、指定した値の個数により、下記のように枠線の形式が設定されます。

・値が1つの場合: @上下左右の枠線形式
・値が2つの場合: @上下の枠線形式 A左右の枠線形式
・値が3つの場合: @上側枠線形式 A左右の枠線形式 B下側枠線形式
・値が4つの場合: @上側枠線形式 A右側枠線形式 B下側枠線形式 C左側枠線形式

::: 対応ブラウザ :::
IE Firefox Opera Chrome Safari
8 7 6 5.5 5 3.5 3 2 1.5 1 10 9 8 7 6 2 1 4 3 2 1
[ 対応状況 : ○=対応、△=一部対応、×=未対応 ]

::: サンプル ::: [ サンプル画面 スタイルシート(CSS)サンプル画面 ]


関連項目