border-styleプロパティ


解説

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>の中の段落だよ。


関連項目

border-color

border-style

border-width


CSS目次 inserted by FC2 system