ホームページ作成ガイド

点線・破線の枠

<html>
<head>
<title>点線・破線の枠</title>
</head>

<body>
<br>
点線・破線の枠をスタイルシートを利用して作成します。<br>
<br>

<div style="border-style:dotted; border-color:green; border-width:4px; padding:1em;">
点線の枠がこの文章の外側に作成されます</div>
<br>

<div style="border-style:dashed; border-color:pink; border-width:4px; padding:1em;">
破線の枠がこの文章の外側に作成されます</div>

</body>
</html>

※点線・破線の枠を作成します。
<div> </div>で囲んだ文章に、style="..."で指定した枠を作ります。

・border-style
枠線の種類を指定します。
dotted 点線
dashed 破線
その他、solid(1本線)、double(二重線)などもあります。

・border-color
枠線の色を指定します。

・border-width
枠線の太さを指定します。

・padding
枠線と、枠線が囲む内容との間に入れるスペースです。
ここでは、1em と指定していますが、これは、1文字分を表します。