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

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

アウトラインとは要素の縁取り(輪郭線)のことで、ボタンや入力フィールドなどに輪郭線をつけて強調したい時などに、outline-widthプロパティや他のアウトラインに関するプロパティが使用されます。

またボーダー(枠線)とアウトラインの違いですが、アウトラインはボーダーのすぐ外側の位置にボックスに重ねて表示されます。 このため、ボックスのサイズや配置に影響することはありません。 また常に矩形(すべての角が直角の長方形、四辺形)で表示されるわけではありません。 他にもoutline-topやoutline-bottomのような辺ごとに個別に指定できるプロパティはありませんので、注意して下さい。

アウトラインの太さ(幅)以外も含めまとめて指定したい場合は、outlineプロパティを使用するとアウトラインの色・形式・幅を一括で設定することができます。

なおoutline-widthプロパティを有効にするにはoutline-styleを併せて指定し、none以外の値を設定します。 outline-styleの値は初期値がnoneとなっているため、outline-widthのみを設定してもアウトラインは表示されませんので注意して下さい。

書式

  • outline-width : ……… アウトラインの太さ(幅)を指定

★:実数値+単位、thin、medium、thick、inherit

実数値+単位
数値にpxなどの単位をつけてアウトラインの太さを指定します。負の値は指定できません。
thin
細い線で表示します。(実際に表示される太さはブラウザ依存)
medium
中くらいの線で表示します。(実際に表示される太さはブラウザ依存)
thick
太い線で表示します。(実際に表示される太さはブラウザ依存)

使用した時の例

.sample1 {outline-width: 5px;}
.sample2 {outline-width: thin;}
.sample3 {outline-width: medium;}
.sample4 {outline-width: thick;}
 
div {outline-style:solid;}
<div class="sample1">5px</div>
<div class="sample2">thin</div>
<div class="sample3">medium</div>
<div class="sample4">thick</div>

ブラウザ上の表示例

5px
thin
medium
thick

対応ブラウザなどのデータ

初期値 medium 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1.5~ , Opera7~ , Safari1.2~

関連情報