border-styleプロパティは要素の境界のスタイルを指定します。
指定可能な値は、none(境界なし)、hidden(境界線を隠す)、dotted(点線)、dashed(破線)、solid(実線)などです。
次の例は、四角形の領域を破線の境界線付きで表示する例です。
<style>
.box {
width: 15em;
height: 4em;
border-width: 1px;
border-style: dashed;
border-color: blue;
}
</style>
<div class="box">
<p><div>の中の段落だよ。</p>
</div>
これで、ブラウザには次のように表示されます。
<div>の中の段落だよ。
次の例は、四角形の領域を破線の境界線付きで表示する例です。
<style>
.box2 {
width: 15em;
height: 4em;
border-width: 3px;
border-style: dashed;
border-color: blue;
}
</style>
<div class="box">
<p><div>の中の段落だよ。</p>
</div>
これで、ブラウザには次のように表示されます。
<div>の中の段落だよ。