border-style:***; border-***-style:***;
border-styleは上下左右の境界線の種類を指定するプロパティです。
実線や二重線、破線などを指定することができます。
▼CSS
div{
border-style:solid dashed double dotted;
}
▼HTML
<div>
境界線の太さが上辺実線、右辺破線、下辺二重線、左辺点線で設定されています。
</div>
▼表示
境界線の太さが上辺実線、右辺破線、下辺二重線、左辺点線で設定されています。
指定できる境界線の種類には以下があります。
none | 線無し |
---|---|
solid | 実線 |
double | 二重線 |
groove | 谷型の線 |
ridge | 山型の線 |
inset | 凹型の線 |
outset | 凸型の線 |
dotted | 点線 |
dashed | 破線 |
値の書き方には何種類かあります。
上下左右個別に設定 | 上、右、下、左の順に値を設定 | border-style:solid dashed double dotted; |
---|---|---|
上下と左右それぞれに設定 | 上下、左右の順に値を設定 | border-style:solid dashed; |
全て同じ種類を設定 | 上下左右の値を設定 | border-style:solid; |
どれか一辺を個別に設定したい場合は、下記のように記述することもできます。
上辺だけ設定 | border-top-style: solid; |
---|---|
右辺だけ設定 | border-right-style: solid; |
下辺だけ設定 | border-bottom-style: solid; |
左辺だけ設定 | border-left-style: 5px; |