“けい線”のいろいろなプロパティを表すborderプロパティ
border

 borderプロパティは、ボックスのmargin(マージン)とpadding(パディング)の間にある“けい線”のいろいろなプロパティを表すプロパティです。

 プロパティ値は、border-widthborder-styleborder-colorの値をそれぞれ半角スペースで区切り指定していきます。

 また、border-topborder-bottomborder-leftborder-rightといったプロパティのショートハンドプロパティとして使用されます。borderプロパティを使えば、上下左右のボーダーを一括で指定できます。

基本データ

構文 セレクタ{border: border-widthの値 border-styleの値 border-colorの値;}
継承 ×
border-widthの値
○○px、○○%、○○emといった単位を指定
border-styleの値
「none」「hidden」「dotted」「dashed」「solid」「double」「groove」「ridge」「inset」「outset」といった既定値を指定
border-colorの値
RGB値、16進数、キーワードを使った色表現の値を指定
親から継承させる場合
inherit
効果 上下左右ボーダーの、さまざまなプロパティ値を一括で設定できる
初期値 0
適用個所 すべての要素

ほげほげですね。

p {
border:10px #000000 solid;
}

動作Webブラウザ

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

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

[window.]document.getElementById("【ID属性値】").style.border

jQueryを使った参照方法

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

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




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

注目のテーマ

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

本日 月間