border-style

概要

border-style CSSプロパティは、要素の境界の4辺全ての線のスタイルを設定するための簡略プロパティです。

• 初期値: none または各々のプロパティによる。
• 適用対象: 全ての要素
• 継承: しない
• メディア: visual
• 計算値: 各々のプロパティによる

構文

border-style: [ <border-style> ]{1,4} | inherit

値

<border-style>

枠線のスタイルは、次のいずれかの値にすることができます。

• none : 境界無し、線幅を 0 に設定します。 これがデフォルト値です。
• hidden : 'none'と同じですが、テーブル要素において境界衝突の解決の方法が異なります。
• dashed : 短いダッシュや線分の一つ。
• dotted : 破線の一つ。
• double : border-widthが同じピクセルでもう1つ追加されたような、2本の直線。
• groove : 彫り込んだ効果。
• inset : ボックスが埋め込まれて見える作り。
• outset : 'inset' の逆。ボックスが3D（エンボス）に見える作り。
• ridge : 'groove' の逆。境界線が3D（浮き出る）表示になります。
• solid : 1本の直線、実線。

最大4つの値を与えることができます。
1つ目の値は、境界の4辺全てに設定します。
2つ目は、左右に設定します。
3つ目は、下に設定します。
4つ目は、左に設定します。

サンプル

実際の表示を確認

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

注釈

border-style のデフォルト値は noneです。これは、border-widthとborder-colorを変更しても、このプロパティを none か hidden 以外に変更しない限り、境界線が表示されないことを意味します。

ブラウザの互換性

仕様

• CSS 2.1 Box model #border-style

参考

border, border-width, border-color, border-radius