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; |
