border-styleの使い方

border-style

プロパティの説明

border-styleは、要素の周りの枠線の種類を指定するプロパティです。このプロパティを指定することで、枠線を表示させることができます。全ての要素に指定することができます。

値は半角スペースで区切って4つまで指定することができます。指定した値の個数により、枠線の種類の適用される範囲が変わります。

値1つ：上下左右全ての枠線の種類を指定します。
値2つ：上下を値1で、左右を値2で指定します。
値3つ：上を値1で、左右を値2で、下を値3で指定します。
値4つ：上を値1で、右を値2で、下を値3で、左を値4で指定します。

指定できる値

none: 枠線を表示しないようにする。
solid: 実線にする。
double: 二重線にする。
dotted: 点線にする。
dashed: 破線にする。
inset: 内側をへこませる。
outset: 内側を浮き上がらせる。
groove: 枠線部分をへこませる。
ridge: 枠線部分を浮き上がらせる。

サンプル

サンプルページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 li{margin:10px 0; padding:20px;}
 .b1{border-style:solid;}
 .b2{border-style:double;}
 .b3{border-style:dotted;}
 .b4{border-style:dashed;}
 .b5{border-style:inset;}
 .b6{border-style:outset;}
 .b7{border-style:groove;}
 .b8{border-style:ridge;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <ul>
  <li class="b1">枠線の種類をsolidと指定。</li>
  <li class="b2">枠線の種類をdoubleと指定。</li>
  <li class="b3">枠線の種類をdottedと指定。</li>
  <li class="b4">枠線の種類をdashedと指定。</li>
  <li class="b5">枠線の種類をinsetと指定。</li>
  <li class="b6">枠線の種類をoutsetと指定。</li>
  <li class="b7">枠線の種類をgrooveと指定。</li>
  <li class="b8">枠線の種類をridgeと指定。</li>
 </ul>
</body>

</html>