ボックスモデル…要素はすべて四角い領域（ボックス）で定義されるという考え方
下記のようにHTMLでボックスを作成し、ボックスの大きさ、背景色、枠線の太さ／色／種類／場所はCSSで指定できる。
（HTMLの記述）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="box.css" />
<title>タイトルを入力</title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
☝box1の中にbox2がある状態
（CSSの記述）
.box1{
width: 300px; （横幅: 300px;）
height: 300px; （高さ・縦幅: 300px;）
background-color: pink; （boxの背景色: ピンク;） ※カラーコードでも指定できる
border :solid black; （枠線 :枠線の種類solid・実線ー 黒;）
border-top-width: 5px; （枠線-位置上-枠線の太さ: 5px;）
border-left-width: 5px; （枠線-位置左-枠線の太さ: 5px;）
border-right-width: 5px; （枠線-位置右-枠線の太さ: 5px;）
border-bottom-width: 5px; （枠線-位置下-枠線の太さ: 5px;） ※bottomとunderを間違えないように注意
border-top-style: dotted; （枠線-位置上-枠線の種類: ドット;）→上の枠線だけ枠線の種類がドットになる
border-top-color: purple; （枠線-位置上-枠線の色: 紫;）→上の線だけ枠線の色が紫になる
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
border: 5px solid yellow;
}
border（枠線）の種類にはsolid（実線ー）のほかに、double（二重線＝）、dashed（破線- - -）、dotted（点線・・・）等がある。
FYI
