（例）【CSS】outlineの使用方法
See the Pen
outline by linlin (@linlin098765)
on CodePen.
<b> 名前：</b><br>
<input class="sample1" type="text" name="name" size="20"><br>
<b> パスワード：</b><br>
<input class="sample2" type="password" name="pass" size="10"><br>
<b>学年：</b><br>
<input class="sample3" type="radio" name="gakunen" value="１年生">１年生
<input class="sample3" type="radio" name="gakunen" value="２年生">２年生
<input class="sample3" type="radio" name="gakunen" value="３年生">３年生
<b>課目：</b><br>
<input class="sample4" type="checkbox" name="kamoku" value="国語">国語
<input class="sample4" type="checkbox" name="kamoku" value="英語">英語
<input class="sample4" type="checkbox" name="kamoku" value="算数">算数
<input class="sample4" type="checkbox" name="kamoku" value="理科">理科
<input class="sample4" type="checkbox" name="kamoku" value="社会">社会
<input class="sample4" type="checkbox" name="kamoku" value="体育">体育<br>input.sample1 {outline: solid 1px gray;}
input.sample2 {outline: double 2px blue;}
input.sample3 {outline: groove 3px red;}
input.sample4 {outline: inset 4px green;}【CSS】outline：アウトラインのスタイル・太さ・色を指定する
CSSのoutlineは、アウトラインのスタイル・太さ・色をまとめて指定できるプロパティです。スタイル・太さ・色の順に半角スペースを空けて指定します。
アウトラインにはborderと違い、上下左右全てに線が指定されます。
outlineのスタイル
- none
太さ０のアウトライン（初期値） - solid
１本線のアウトライン - double
２本線のアウトライン - groove
立体的に窪んだアウトライン - ridge
立体的に隆起したアウトライン - inset
上・左のアウトラインが暗く、下・右のアウトラインが明るい - outset
上・左のアウトラインが明るく、下・右のアウトラインが暗い - dashed
破線 - dotted
点線
アウトラインの太さ
- 数値
px, em,exなど - キーワード
thin, medium,thick、左から右の順で太い