border-color: 上下左右の各枠線の色一括指定
border-color: 値;
border-colorは、上下左右の枠線の色を一括で指定するプロパティです。 各枠線の色を下記の方法で指定できます。(値は4つまで) 2個以上の値を指定する場合はスペースで区切って記述します。
指定する個数によって、下記のように適用されます。
値 | |
---|---|
枠線の色 | #666666, #666, カラーネームgray など |
個々の枠線の色を指定 ↓↓
値を1 個指定: 上下左右すべて border-color: #993333; |
枠線の色はすべて#993333 |
値を2 個指定: 1 個目は上下、2 個目は左右 border-color: #993333 #3333cc; |
上下の枠線の色が#993333、 左右が#3333cc |
値を3 個指定: 1 個目は上、2 個目は左右、3 個目は下 border-color: #993333 #666 #ff6633; |
上が#993333、左右が#666 下が#ff6633 |
値を4 個指定: 上、右、下、左の順 border-color: red blue green gold; |
上、右、下、左の順番に red blue green gold |
サンプル − 個々の枠線の色を指定
sample css ↓
.sample {
border-color: #ff0000 #0000ff #008000 #ffd700;
border-style: solid; border-width: 2px;
padding: 3px 15px;
}
html ↓
<html>
<body>
<div class="sample">個々の枠線の色を指定
</div>
</body>
</html>
実際の見え方 ↓
個々の枠線の色を指定