border-style: 上下左右の各枠線のスタイルを一括指定
border-style: 値;
border-styleは、上下左右の枠線のスタイルを一括で指定するプロパティです。 各枠線のスタイルを下記の方法で指定できます。(値は4つまで)
2個以上の値を指定する場合はスペースで区切って記述します。 指定する個数によって、下記のように適用されます。
値 | |
---|---|
枠線のスタイル | solid, double, groove, ridge, inset, outset, dotted, dashed, none |
個々の枠線のスタイルを指定 ↓↓
値を1 個指定: 上下左右すべて border-style: dotted; |
すべて点線 |
値を2 個指定: 1 個目は上下、2 個目は左右 border-style: dotted solid; |
上下が点線、左右が実線 |
値を3 個指定: 1 個目は上、2 個目は左右、3 個目は下 border-style: dotted solid double; |
上が点線、左右が実線 下が二重線 |
値を4 個指定: 上、右、下、左の順 border-style: dotted solid double dashed; |
上、右、下、左の順番に 点線、実線、二重線、破線 |
枠線の種類 ↓↓
none 枠線なし | |
solid 実線 | |
double 二重線 | |
groove へこんで見える線 | |
ridge 浮き上がって見える線 | |
inset 線より内側がへこんで見える | |
outset 線より内側が浮いて見える | |
dotted 点線 | |
dashed 破線 |
サンプル − 個々の枠線のスタイルを指定
sample css ↓
.sample {
border-style: dotted solid double dashed;
border-width: 3px;
border-color:#333366;
padding: 3px 15px;
}
html ↓
<html>
<body>
<div class="sample">個々の枠線のスタイルを指定
</div>
</body>
</html>
実際の見え方 ↓
個々の枠線のスタイルを指定