枠線

border は 3 つの値をならべて書く

border は太さ・線の種類・色の 3 つをまとめて 1 行で書きます。

線の種類は solid が実線、dashed が破線、dotted が点線です。1 辺だけ引きたいときは border-bottom や border-top のように向きを付けます。見出しの下に 1 本引くだけで、区切りがぐっとはっきりします。

逆に線を消したいときは none を指定します。ボタンにはブラウザが最初から灰色の枠を付けているので、自分でデザインするときは消してしまうのが定番です。

border-radius で角を丸める

border-radius は角の丸みです。px で書くと丸みの半径になり、50% にすると正円、999px のような大きい値を入れると左右がきれいな半円になります。

枠線がなくても角は丸くなります。背景色だけの要素にも効くので、タグのような丸いラベルもこれだけで作れます。

書くこと

section を枠線と角丸で囲んでカードの形にし、見出しの下にテーマカラーの線を引きます。写真は丸く、表には罫線、送信ボタンは枠線を消して丸い形にしましょう。

1. .section の border-radius を 12px にして角を丸くする
2. .section-title に border-bottom で下線を引く
3. .profile-photo に border を付け、border-radius を 50% にして丸い写真にする
4. .work-card / .skill-table / .form-input にも枠線を付け、.submit-button は border を none にして角を丸める