“けい線”の色を表すborder-colorプロパティ
border-color

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

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

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

基本データ

構文 セレクタ{border-color:値;}
継承 ×
値
RGB値を使った指定
 
16進数のカラーコードによる指定
 
キーワード値による指定
 
親から継承させる場合
inherit
効果 ボックスの四方の“けい線”色を一括で設定できる
初期値 0
適用個所 すべての要素

例

ほげほげですね。

ほげほげですね。

p {
border-color: blue;
border-style:solid;
}
p {
border-left-color: rgb(140,20,0) ;
border-bottom-color: rgb(100%, 0%, 0%) ;
border-right-color: #ff0 ;
border-style:solid;
}

動作Webブラウザ

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

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

[window.]document.getElementById("【ID属性値】").style.borderColor
[window.]document.getElementById("【ID属性値】").style.borderTopColor
[window.]document.getElementById("【ID属性値】").style.borderBottomColor
[window.]document.getElementById("【ID属性値】").style.borderLeftColor
[window.]document.getElementById("【ID属性値】").style.borderRightColor

jQueryを使った参照方法

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

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

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

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

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

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

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




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

注目のテーマ

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

本日 月間
＠IT