borderをつけると、要素の見た目の大きさが変わるのはなぜ？

borderの太さぶん、要素は外側に大きくなるからです。少し先で習うbox-sizing: border-box;を使うと、指定した大きさのまま線を引けるようになります。

上下だけ、左右だけに線をつけたいときは？

border-top・border-right・border-bottom・border-leftを、必要な辺だけ指定すれば、好きな組み合わせで線をつけられます。

border: none;で消せます。ボタンや入力欄には初期設定で枠線がついていることがあるので、デザインを自分でそろえたいときによく使います。

「ここからここまでが、ひとかたまり」。それを目で見えるようにしてくれるのが枠線です。注意書きを囲ったり、カードのふちを描いたり。borderひとつで、部品のかたちがはっきりします。

.box {
  border: 2px solid teal;
}

class="box"をつけた部品に、青緑の枠線がつきます。borderのうしろに並ぶ3つは、それぞれこういう意味です。

「2ピクセルの、実線の、青緑の枠」と、左から順に読めます。3つをスペースでつなげて一気に書けるのがborderの便利なところです。

線の種類（solid・dashed・dotted）を変えると、枠の表情がこう変わります。

太さ・種類・色の3つを入れかえるだけで、囲み方の印象が変わります。まずはsolidから使ってみましょう。

borderは4辺ぜんぶに線をつけますが、border-bottom（下だけ）やborder-left（左だけ）のように、方向を指定した名前を使えば1辺だけに線をつけられます。

.header {
  border-bottom: 1px solid #e9e3d9;
}
.quote {
  border-left: 4px solid #e8734e;
}

下だけ・左だけと、1辺に線を引くと、線が「区切り」や「目印」の役目をします。

border-bottomはヘッダーの下端に境界線を引いて「ここまでがヘッダー」を示すときに、border-leftは引用の左に太めの線を添えて「引用ですよ」と目立たせるときによく使われます。-top・-rightもあわせて、4方向すべてに同じ考え方が使えます。

ボタン（<button>）や入力欄（<input>）には、はじめから枠線がついています。デザインを自分でそろえたいときは、border: none;でいったん消してしまうのが定番です。

.btn {
  border: none;
  background-color: teal;
  color: white;
}

「線を足す」だけでなく「初期設定の線を消す」も、borderの大事な役目のひとつです。