“けい線”のスタイルを表すborder-styleプロパティ
border-style

　border-styleプロパティは、ボックス“けい線”のスタイルを表すプロパティです。border-styleプロパティを使えば、上下左右のボーダースタイルを一括で指定できます。

　border-top-style、border-bottom-style、border-left-style、border-right-styleといったプロパティのショートハンドプロパティとして使用されます。

  • border-top-style
    ボックス上側の“けい線”スタイルを設定するプロパティ
  • border-bottom-style
    ボックス下側の“けい線”スタイルを設定するプロパティ
  • border-left-style
    ボックス左側の“けい線”スタイルを設定するプロパティ
  • border-right-style
    ボックス右側の“けい線”スタイルを設定するプロパティ

基本データ

構文 セレクタ{border-style:値;}
継承 ×
値
「none」「hidden」「dotted」「dashed」「solid」「double」「groove」「ridge」「inset」「outset」といったあらかじめ定義されているボーダースタイル値を指定

よく使用されるスタイルは、実線を表す「solid」、ドット線を表す「dotted」、ダッシュ線を表す「dashed」
効果 ボックスの四方の“けい線”スタイルを一括で設定できる
初期値 none
適用個所 すべての要素

例

四方のボーダースタイルをdashedに設定する場合

水平方向の上下ボーダーはsolidで垂直方向の左右ボーダーはdottedに設定する場合

p {
border-style: dashed;
}
p {
border-style: solid dotted;
}

動作Webブラウザ

Internet Explorer 全バージョン
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.borderStyle
[window.]document.getElementById("【ID属性値】").style.borderTopStyle
[window.]document.getElementById("【ID属性値】").style.borderBottomStyle
[window.]document.getElementById("【ID属性値】").style.borderLeftStyle
[window.]document.getElementById("【ID属性値】").style.borderRightStyle

jQueryを使った参照方法

$('【セレクタ】').css('border-style','値');
$('【セレクタ】').css({'border-style':'値'});

$('【セレクタ】').css('border-top-style','値');
$('【セレクタ】').css({'border-top-style':'値'});

$('【セレクタ】').css('border-bottom-style','値');
$('【セレクタ】').css({'border-bottom-style':'値'});

$('【セレクタ】').css('border-left-style','値');
$('【セレクタ】').css({'border-left-style':'値'});

$('【セレクタ】').css('border-right-style','値');
$('【セレクタ】').css({'border-right-style':'値'});

CSSリファレンス インデックス

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT