border-width: ***;
border-widthは上下左右の境界線の太さを指定するプロパティです。
境界線の太さはpx, pt, emなどで指定することができます。
▼CSS
div{
border-width:5px 10px 5px 10px;
}
▼HTML
<div>
境界線の太さが上5px、右10px、下5px、左10pxで設定されています。
</div>
▼表示
境界線の太さが上5px、右10px、下5px、左10pxで設定されています。
値の書き方には何種類かあります。
上下左右個別に設定 | 上、右、下、左の順に値を設定 | padding:5px 10px 15px 20px; |
---|---|---|
上下と左右それぞれに設定 | 上下、左右の順に値を設定 | padding:10px 15px; |
全て同じマージンを設定 | 上下左右の値を設定 | padding:15px; |
どれか一辺を個別に設定したい場合は、下記のように記述することもできます。
上辺だけ設定 | border-top-width: 5px; |
---|---|
右辺だけ設定 | border-right-width: 5px; |
下辺だけ設定 | border-bottom-width: 5px; |
左辺だけ設定 | border-left-width: 5px; |