枠線

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

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

border: 3px dashed #b45309;

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

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

border-radius で角を丸める

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

border-radius: 6px;   /* 小さな角丸 */
border-radius: 50%;   /* 幅と高さが同じなら円になる */

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

書くこと

section を枠線と角丸で囲んでカードの形にし、見出しの下にテーマカラーの線を引きます。写真は丸く、表には罫線、送信ボタンは枠線を消して丸い形にしましょう。表の隣り合う線を一本にまとめる border-collapse はひな形に用意してあります。

1. .section の border-radius を 12px にする
2. .section-title に太さ 2px、solid、#0071e3 の border-bottom を書く
3. .profile-photo に太さ 4px、solid、#ffffff の border と、50% の border-radius を書く
4. 準備済みのセルのルールと .work-card に、太さ 1px、solid、#e5e1d8 の border を書く
5. .form-input に太さ 1px、solid、#c9d1da の border を書き、.submit-button の border を none にする。ほかの角丸は準備済み