border-●●●-style: 個々の枠線のスタイルを指定
値 | |
---|---|
枠線のスタイル | solid, double, groove, ridge, inset, outset, dotted, dashed, none |
枠線のスタイル種類一覧は こちらにあります
border-top-style: 値; 上の枠線のスタイルを指定
border-right-style: 値; 右の枠線のスタイルを指定
border-bottom-style: 値; 下の枠線のスタイルを指定
border-left-style: 値; 左の枠線のスタイルを指定
枠線のスタイルを指定 ↓↓
上の枠線のスタイルを指定 border-top-style: solid; |
上の枠線のスタイルを実線に |
右の枠線のスタイルを指定 border-right-style: double; |
右の枠線のスタイルを二重線に |
下の枠線のスタイルを指定 border-bottom-style: dotted; |
下の枠線のスタイルを点線に |
左の枠線のスタイルを指定 border-left-style: dashed; |
左の枠線のスタイルを破線に |
サンプル − 個々の枠線のスタイルを指定
sample css ↓
.sample {
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
border-width: 3px;
border-color: #fd9b63;
height: 100px;
padding: 5px 15px 0;
}
html ↓
<html>
<body>
<div class="sample">個々の枠線のスタイルを指定
</div>
</body>
</html>
実際の見え方 ↓
個々の枠線のスタイルを指定