1.要素に枠線を付ける（border）
HTML要素には枠線の装飾をつけることができます。枠線はスタイル・太さ・色の３種類を指定することができます。
- border-style
- border-width
- border-color
そしてこの3つをborderで1つにまとめることができます。値をスペースで区切ります。
border{ スタイル 太さ 色 ; }
1本線・太さ3px・青の枠線を引いてみます。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>枠線をつける</p>
</body>
</html>
サンプルCSS：
p{
width: 240px;
margin: auto;
border: solid 3px blue;
}
プレビュー：
2.border-styleの違いについて
borderは1本線以外にもいくつかスタイルが用意されています。代表的なものを紹介します。
solid（1本線）
double（2本線）
dashed（破線）
dotted（点線）
3.上下左右を分けて指定する
例えば上下左右のうち、下だけの枠線を引きたいとします。その際は以下のように記述をします。
.border { border-bottom : solid 1px #000 ; }
borderを上下左右に分けると、以下のように記述できます。
- border-top
- border-right
- border-bottom
- border-left
これを使って、見出しを装飾してみましょう。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>要素に枠線をつける</h1>
</body>
</html>
サンプルCSS：
h1{
font-size: 18px;
padding-left: 10px;
border-left: solid 5px blue;
border-bottom: solid 1px #ccc;
}
プレビュー：
