[新着] Webテンプレートを仮オープンしました
border-style と border-***-style は、枠線の種類を指定するプロパティです。
上下左右の枠線をまとめて指定する方法と、それぞれを個別に指定する方法があります。
border-style … 上下左右をまとめて指定します。
border-***-style … 上下左右を個別に指定します。（*** の部分には、top、right、bottom、left が入ります）
div {
border-width: thick;
border-color: red;
border-style: solid;
}
p {
border-width: medium;
border-color: red;
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
}
【枠線の種類】
solid（普通の線）
double（二重の線）
groove（谷型の線）
ridge（山型の線）
inset（凹型）
outset（凸型）
dotted（点線） 一部の古いブラウザでは未対応
dashed（大きい点線） 一部の古いブラウザでは未対応
none（線なし）デフォルト
border-style … 上下左右をまとめて指定する
| border-style | 枠線の種類を指定します |
|---|
【指定方法】
border-style: solid; … ［上下左右］ を指定
border-style: dashed double; … ［上下］ と ［左右］ を指定
border-style: dashed double dotted; … ［上］ と ［左右］ と ［下］ を指定
border-style: solid dashed double dotted; … ［上］ と ［右］ と ［下］ と ［左］ を指定
上記例のように、4タイプの指定方法があります。
それぞれの値は、半角スペースで区切って記述します。
border-***-style … 上下左右を個別に指定する
| border-top-style | 上の枠線を指定します |
|---|---|
| border-right-style | 右の枠線を指定します |
| border-bottom-style | 下の枠線を指定します |
| border-left-style | 左の枠線を指定します |
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
h2, h3, span {
border-width: medium;
border-color: #000000;
}
.example1 {
border-style: dotted;
}
.example2 {
border-top-style: dotted;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: groove;
}
-->
</style>
</head>
<body>
<h2 class="example1">点線タイプの枠線</h2>
<h3 class="example2">上下左右に異なる種類を指定</h3>
<p>点線タイプの<span class="example1">枠線</span>を指定します</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
点線タイプの枠線を指定します
