border-●●●-color: 個々の枠線のスタイルを指定
値 | |
---|---|
枠線の色 | #666666, #666, カラーネームgray など |
border-top-color: 値; 上の枠線の色を指定
border-right-color: 値; 右の枠線の色を指定
border-bottom-color: 値; 下の枠線の色を指定
border-left-color: 値; 左の枠線の色を指定
枠線の色を指定 ↓↓
上の枠線の色を指定 border-top-color: #8b0000; |
上の枠線の色を#8b0000に |
右の枠線の色を指定 border-right-color: darkred; |
右の枠線の色をdarkredに |
下の枠線の色を指定 border-bottom-color: #666666; |
下の枠線の色を#666666に |
左の枠線の色を指定 border-left-color: #666; |
左の枠線の色を#666に |
サンプル − 個々の枠線の色を指定
sample css ↓
.sample {
border-top-color: #8b0000;
border-right-color: darkred;
border-bottom-color: #666666;
border-left-color: #666;
border-width: 3px;
border-styler: solid;
height: 100px;
padding: 5px 15px 0;
}
html ↓
<html>
<body>
<div class="sample">個々の枠線の色を指定
</div>
</body>
</html>
実際の見え方 ↓
個々の枠線の色を指定