[新着] Webテンプレートを仮オープンしました
border-color と border-***-color は、枠線の色を指定するプロパティです。
上下左右の枠線をまとめて指定する方法と、それぞれを個別に指定する方法があります。
border-color … 上下左右をまとめて指定します。
border-***-color … 上下左右を個別に指定します。（*** の部分には、top、right、bottom、left が入ります）
div {
border-width: thick;
border-color: red;
border-style: solid;
}
p {
border-width: thick;
border-top-color: #85b9e9;
border-right-color: #bde9ba;
border-bottom-color: #ffd37d;
border-left-color: #d1d1d1;
border-style: solid;
}
border-color … 上下左右をまとめて指定する
| border-color | 枠線の色を指定します |
|---|
【指定方法】
border-color: #85b9e9; … ［上下左右］ を指定
border-color: #85b9e9 #bde9ba; … ［上下］ と ［左右］ を指定
border-color: #85b9e9 #bde9ba #ffd37d; … ［上］ と ［左右］ と ［下］ を指定
border-color: #85b9e9 #bde9ba #ffd37d #d1d1d1; … ［上］ と ［右］ と ［下］ と ［左］ を指定
上記例のように、4タイプの指定方法があります。
それぞれの値は、半角スペースで区切って記述します。
border-***-color … 上下左右を個別に指定する
| border-top-color | 上の枠線を指定します |
|---|---|
| border-right-color | 右の枠線を指定します |
| border-bottom-color | 下の枠線を指定します |
| border-left-color | 左の枠線を指定します |
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
h2, h3, span {
border-width: thick;
border-style: solid;
}
.example1 {
border-color: red;
}
.example2 {
border-top-color: #85b9e9;
border-right-color: #bde9ba;
border-bottom-color: #ffd37d;
border-left-color: #d1d1d1;
}
-->
</style>
</head>
<body>
<h2 class="example1">赤い枠線</h2>
<h3 class="example2">上下左右に異なる色を指定</h3>
<p>赤い<span class="example1">枠線</span>を指定します</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
赤い枠線を指定します
