HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


外枠(ボーダー)の太さを指定する

CSSの書き方

border-width:太さ 太さ … ;

CSSの詳細情報
プロパティ名 border-width 対応ブラウザ Windows MAC
読み方 ボーダーウィドゥス IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0
意味 外枠太さ CSSレベル CSSレベル1
設定値 サイズ/
thin/medium/thick
対象 すべての要素
デフォルト medium 継承 しない

解説

ボックスの外枠(境界線)は、太さをまとめて指定することもできます。ボーダーウィドゥスプロパティに対する値はその数によって、指定できる上下左右の方向が以下の表のようになります。

記入する値の数 対象の方向
1つ 四方向(上/下/左/右)同じ
2つ 鉛直と水平方向(上下/左右の順)
3つ 上/左右/下の順
4つ 右回り方向(上/右/下/左の順)

線の太さについて

線の太さについては、通常のサイズによる指定方法の他に、「thin(細い)」、「medium(標準)」、「thick(太い)」という指定方法もあります。ただし、これはあくまで相対的な指定ですので、実際に表示される線の太さはブラウザに依存します。

CSS/HTMLサンプル

div { border-width:2px 4px thick 8px; border-style:solid; }

DIV要素の外枠の太さを2、4、8ピクセルとthick(太い)、線種は実線で表示 サンプル