カテゴリー
CSS outline-width

【CSS】outline-width:アウトラインの太さを指定する

(例)【CSS】outline-widthの使用方法

See the Pen
outline-color
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="1年生">1年生
<input class="sample3" type="radio" name="gakunen" value="2年生">2年生
<input class="sample3" type="radio" name="gakunen" value="3年生">3年生

<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-style: solid; outline-width: 1px; outline-color: gray;}
input.sample2 {outline-style: double; outline-width: 2px; outline-color: blue;}
input.sample3 {outline-style: groove; outline-width: 3px; outline-color: red;}
input.sample4 {outline-style: inset; outline-width: 4px; outline-color: green;}

【CSS】outline-width:アウトラインの太さを指定する

 CSSのoutline-widthは、アウトラインの太さを指定するプロパティです。

アウトラインの太さ

  • 数値
    px, em,exなど
  • キーワード
    thin, medium,thick、左から右の順で太い