border-●●●-width: 個々の枠線の幅(サイズ)を指定
値 | |
---|---|
枠線の幅 | 数値 px / em / % / ex / in / cm / mm / pt / pc キーワード thin / medium / thick |
border-top-width: 値; 上の枠線の幅(サイズ)を指定
border-right-width: 値; 右の枠線の幅(サイズ)を指定
border-bottom-width: 値; 下の枠線の幅(サイズ)を指定
border-left-width: 値; 左の枠線の幅(サイズ)を指定
枠線の幅(サイズ)を数値で指定 ↓↓
上の枠線の幅を指定 border-top-width: 4px; |
上の枠線の幅を4pxに |
右の枠線の幅を指定 border-right-width: 4px; |
右の枠線の幅を4pxに |
下の枠線の幅を指定 border-bottom-width: 4px; |
下の枠線の幅を 4pxに |
左の枠線の幅を指定 border-left-width: 4px; |
左の枠線の幅を4pxに |
サンプル − 個々の枠線を指定
sample css ↓
.sample {
border-top-width: 4px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 2px;
border-style: solid;
border-color: #6666ff;
height: 100px;
padding: 5px 15px 0;
}
html ↓
<html>
<body>
<div class="sample">個々の枠線を指定
</div>
</body>
</html>
実際の見え方 ↓
個々の枠線を指定