border-width/枠線の太さ

説明

　border-widthプロパティは枠線の太さを上下左右一括で設定出来ます。border-top-widthは上の枠線の太さ、border-right-widthは右、border-bottom-widthは下、border-left-widthは左の枠線の太さの設定になります

構文

　border-widthプロパティの構文は以下の通りです。

border-width: 枠線の太さ;

　border-top-widthプロパティの構文は以下の通りです。

border-top-width: 枠線の太さ;

　border-right-width、border-bottom-width、border-left-widthも同様です。

　枠線の太さの例は以下の通りです。

border-width利用例

　border-widthの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
border-style: solid;
border-width: thin;
}

<div>thin例</div>

　上記を表示すると以下になります。

　上記のように細線で表示されます。

　mediumを指定するとthinより太い線で表示されます。

　thickを指定すると更に太い線で表示されます。

　以下は10pxを指定した時です。

　以下は1.5emを指定しています。

border-top-width利用例

　border-top-widthの利用例は以下の通りです。

div {
border-top-style: solid;
border-top-width: thin;
}

<div>thin例</div>

　上記を表示すると以下になります。

　上だけ実線で表示されます。

　上の線だけ変えたい、上下左右個別に指定した時等に使います。

　border-right-width、border-bottom-width、border-left-widthについても同様の利用が出来ます。

留意点

　枠線はボックスで指定した横幅の外側に表示されます。

　上記は幅を5em、つまり5文字分に指定していますが、その外に表示されています。

　10emの幅を持つ点線のボックスに5emの幅を持つボックスをfloatを使って2つ並べようとしても以下のように下の表示されてしまいます。

　枠の太さを1emに指定しているため、外側のボックスで(5em+2em)×2=14emの幅を取れば以下のように回り込んで表示されます。

　このように幅と枠の太さや表示される箇所は留意が必要です。

関連ページ

・ホームページ作成「ボックスのまとめ」

　borderだけでなく、背景、余白、幅、回り込み、枠と幅の関係等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る