border-width/枠線の太さ

border-widthプロパティを使うと枠線の太さを指定出来ます。

説明

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

border-width説明

構文

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

border-width: 枠線の太さ;

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

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

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

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

【枠線の太さ】
種類 表示
thin 細線
medium 普通
thick 太線
px ピクセル指定
em 文字に対する割合

border-width利用例

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

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

<div>thin例</div>

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

thin例

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

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

medium例

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

thick例

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

10px例

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

1.5em例

border-top-width利用例

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

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

<div>thin例</div>

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

thin例

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

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

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

留意点

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

12345

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

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

12345
12345

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

12345
12345

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

関連ページ

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)