ボーダーのスタイルをまとめて指定する

border-style

{ border-style ボーダー・スタイル : -top -right -bottom -left; }

border-styleプロパティは、ボーダーのスタイルをまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 なし
適用される要素 すべての要素
モジュール Backgrounds and Borders Module Level 3

値の指定方法

指定できる値はborder-style系の各プロパティと同様です。それぞれの値は半角スペースで区切って4つまで指定でき、上辺、右辺、下辺、左辺の順に適用されます。い ずれかの値を省略した場合は以下のような指定となります。

  • 値が1つ すべての辺に同じ値が適用されます。
  • 値が2つ 1つ目が上下辺、2つ目が左右辺に適用されます。
  • 値が3つ 1つ目が上辺、2つ目が左右辺、3つ目が下辺に適用されます。

サンプルコード

以下の例では、ボーダーのスタイルをborder-styleプロパティでまとめて指定しています。その上で、左右辺のボーダーだけ非表示にするために、border-right-style、border-left-styleプロパティで左右辺のスタイルを上書きしています。

div{
  border-style: solid;
  border-right-style: hidden;
  border-left-style: hidden;
}