記事の内容
border-colorプロパティ
border-colorプロパティは、要素のボーダーの色を指定するために使用されます。
border-colorプロパティ
記法
.クラス名 {
border-color: 上辺色 右辺色 下辺色 左辺色;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>border-colorプロパティに関して</title>
</head>
<body>
<div class="boder-color-val1">ボーダー色設定値1つ</div>
<div class="boder-color-val2">ボーダー色設定値2つ</div>
<div class="boder-color-val3">ボーダー色設定値3つ</div>
<div class="boder-color-val4">ボーダー色設定値4つ</div>
</body>
</html>div {
margin: 5px;
}
.boder-color-val1 {
border-style: solid;
border-width: 10px;
border-color: #103961;
}
.boder-color-val2 {
border-style: solid;
border-width: 10px;
border-color: #103961 #19aa96;
}
.boder-color-val3 {
border-style: solid;
border-width: 10px;
border-color: #103961 #19aa96 #ffee99;
}
.boder-color-val4 {
border-style: solid;
border-width: 10px;
border-color: #103961 #19aa96 #ffee99 #db6148;
}出力結果
ボーダー色設定値1つ
ボーダー色設定値2つ
ボーダー色設定値3つ
ボーダー色設定値4つ
ボーダー色を個別指定
border-colorプロパティ(位置指定)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>border-colorプロパティ(位置指定)に関して</title>
</head>
<body>
<div class="boder-top-color">上辺指定</div>
<div class="boder-right-color">右辺指定</div>
<div class="boder-bottom-color">下辺指定</div>
<div class="boder-left-color">左辺指定</div>
</body>
</html>div {
margin: 5px;
border-color: #a9a9a9;
}
.boder-top-color {
border-style: solid;
border-width: 10px;
border-top-color: #103961;
}
.boder-right-color {
border-style: solid;
border-width: 10px;
border-right-color: #19aa96;
}
.boder-bottom-color {
border-style: solid;
border-width: 10px;
border-bottom-color: #ffee99;
}
.boder-left-color {
border-style: solid;
border-width: 10px;
border-left-color: #db6148;
}出力結果
上辺指定
右辺指定
下辺指定
左辺指定