borderプロパティ

TOPページに戻る > CSS

スポンサード リンク

borderプロパティ

HTML要素の上下左右の枠線のスタイル(枠線の種類)、枠線の太さ、枠線の色をまとめて指定できます
値は、border-style、border-width、border-colorの3つの値を使います
値を書く順序は、自由です
2つまで値は省略できます
値を省略した場合、それぞれの値は初期値になります

使い方(書式)

セレクタ { border: 値; }                                    

borderプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
border-styleの値 枠線の種類を指定
border-widthの値 枠線の太さを指定
border-colorの値 枠線の色を指定

プロパティ 値を省略した場合の初期値
border-style none
border-width medium
border-color 文字色に指定されている色

実際の指定方法

.hoge {
border: solid 1px #FC0;  /* 要素の枠線を実線、1px、色は#FC0で表示 */
 }
.hoge2 {
 border: solid 1px;      /* 要素の枠線を実線、1pxで表示、色は文字色*/
 }
.hoge3 {
 border: solid #FC0;     /* 要素の枠線を実線、色は#FC0で表示、太さは初期値 */
 }
.hoge4 {
 border: solid;          /* 要素の枠線を実線で表示、太さは初期値、色は文字色 */
 }

html部分

<p class="hoge">border: solid 1px #FC0;</p>

<p class="hoge2">border: solid 1px;</p>

<p class="hoge3">border: solid #FC0;</p>

<p class="hoge4">border: solid;</p>

実際の表示

border: solid 1px #FC0;

border: solid 1px;

border: solid #FC0;

border: solid;





(C)2012 ホームページ作成無料