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-widthborder-colorを変更しても、このプロパティを none hidden 以外に変更しない限り、境界線が表示されないことを意味します。

ブラウザの互換性

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本機能 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本機能 1.0 (1.9.2) ? ? ? ?

仕様

参考

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

Document Tags and Contributors

Contributors to this page: ethertank, Yuichiro
最終更新者: ethertank,
サイドバーを隠す