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

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も同様です。
枠線の太さの例は以下の通りです。
種類 | 表示 |
---|---|
thin | 細線 |
medium | 普通 |
thick | 太線 |
px | ピクセル指定 |
em | 文字に対する割合 |
border-widthの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
div {
border-style: solid;
border-width: thin;
}
<div>thin例</div>
上記を表示すると以下になります。
上記のように細線で表示されます。
mediumを指定するとthinより太い線で表示されます。
thickを指定すると更に太い線で表示されます。
以下は10pxを指定した時です。
以下は1.5emを指定しています。
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の幅を取れば以下のように回り込んで表示されます。
このように幅と枠の太さや表示される箇所は留意が必要です。
・ホームページ作成「CSSのボックスモデル」
borderだけでなく、ボックス全体の説明をしています。
・ホームページ作成「スタイルシートの定義方法」
外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ