枠線したい（`border`）

.box {
    border: 1px solid #cccccc;
    border-radius: 8px;
}

borderプロパティで、要素のまわりに枠線を引けます。枠線は「太さ・線の種類・色」の3つをまとめて指定します。

枠線は、ボックスモデルの4層（内容・パディング・枠線・マージン）のうち、パディングとマージンのあいだの層です。 border-radiusで角を丸めたり、outlineでレイアウトに影響しない線を引いたりもできます。

参考

枠線を引きたい（`border`）

.box {
    border: 1px solid #cccccc;
}

borderプロパティで、要素の枠線を「太さ・線の種類・色」の順にまとめて指定できます。

線の種類には次のようなものがあります。

太さは1pxのような数値のほか、thin / medium / thickのキーワードも使えます。

.quote {
    border-left: 4px solid #0066cc;
    padding-left: 1rem;
}

.table-row {
    border-bottom: 1px solid #dddddd;
}

border-top、border-right、border-bottom、border-leftで、特定の一辺だけに枠線を引けます。

引用ブロックの左に太い線を入れる、表の行の下に区切り線を入れる、といった装飾によく使います。

.box {
    border-width: 2px;
    border-style: dashed;
    border-color: #0066cc;
}

border-width、border-style、border-colorで、枠線の3要素を別々に指定できます。

border-styleは初期値がnoneなので、border-widthやborder-colorだけ指定しても枠線は表示されません。枠線を出すにはborder-styleが必須です。

.card {
    border-radius: 8px;
}

.avatar {
    border-radius: 50%;
}

border-radiusプロパティで、要素の角を丸くできます。

値が大きいほど丸みが強くなります。 50%を指定すると、正方形は円、長方形は楕円になります。

枠線がなくても、背景色や画像がある要素なら角丸が見た目に効きます。

.tab {
    border-radius: 8px 8px 0 0;  /* 左上 右上 右下 左下 */
}

値を4つ並べると、角ごとに丸みを変えられます。順番は左上から時計回りです。

button:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

outlineプロパティはborderによく似ていますが、ボックスモデルの層に含まれず、レイアウトの幅や高さに影響しません。

キーボード操作でフォーカスした要素を目立たせる用途が中心です。 outlineを消すとキーボードで操作している人が現在位置を見失うため、消すなら代わりの見た目を必ず用意します。