文章や文字、画像を囲む枠の種類を指定する

HTML文書を使った ホームページやブログなどのウェブサイトで、BORDER-WIDTHを使って文章や文字、画像を枠で囲んで表示する際に、枠線の種類を指定することができます。BORDER-STYLEで指定します。

四辺の枠線の種類をまとめて指定する場合
<タグ名 style="border-style:枠線の種類">～</タグ名>
上辺の枠線の種類のみを指定する場合
<タグ名 style="border-top-style:枠線の種類">～</タグ名>
下辺の枠線の種類のみを指定する場合
<タグ名 style="border-bottom-style:枠線の種類">～</タグ名>
左辺の枠線の種類のみを指定する場合
<タグ名 style="border-left-style:枠線の種類">～</タグ名>
右辺の枠線の種類のみを指定する場合
<タグ名 style="border-right-style:枠線の種類">～</タグ名>
  1. タグ名：P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 枠線の種類：下記の中から指定できます。
    枠線の種類説明サンプル
    none なし
    hidden なし
    dotted 丸い点線
    dashed 四角い点線
    solid 実線
    枠線の種類説明サンプル
    double 二重線
    groove 凹んだような立体枠
    ridge 尖ったような立体枠
    inset 中央が凹の立体枠
    outset 中央が凸の立体枠

サンプルです。この中から、『 double 』で枠線を指定してみます。

この段落文章を、太さ 10ピクセルの赤色の二重線の枠で囲みます。
枠で囲むことで、文章を強調したり、見やすくすることができます。
Code:
<div style="border-style:double;border-color:red;border-width:10px">
この段落文章を、太さ 10ピクセルの赤色の二重線の枠で囲みます。<br>
枠で囲むことで、文章を強調したり、見やすくすることができます。
</div>