outlineプロパティ

TOPページに戻る > CSS

outlineプロパティ

outlineプロパティは、輪郭線の種類、太さ、色をまとめて指定できます
枠線のさらに外に輪郭線をつけることができます
この輪郭線は、border要素とは違い、要素の幅や高さに影響しません
全要素に適用可能ですが、フォーム関係に使われることが多いです
outlineプロパティを使う時は値に輪郭線の種類を指定してください。outline-styleプロパティの初期値がnoneなので輪郭線の種類を指定しないと輪郭線が表示できません
値の順序はありません。値は省略することもできます
※IE6、IE7が未対応、IE8から対応しています

使い方（書式）

セレクタ { outline: 値; }                                    

outlineプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
outline-styleの値	輪郭線の種類
outline-widthの値	輪郭線の太さ
outline-colorの値	輪郭線の色

実際の指定方法

.hoge {
 outline: dashed 1px #FF6600;   /* 輪郭線の種類、太さ、色を指定  */
 margin-bottom: 20px;
 width: 200px;
  }

.hoge2 {
 outline: groove medium;   /* 値の省略もできます。色の値を省略しました  */
 width: 200px;
  }

html部分

<form>
<textarea class="hoge">outline-width: 1px;</textarea>
</form>
<form>
<textarea class="hoge2">outline-width: medium;</textarea>
</form>

実際の表示

outline: dashed 1px #FF6600;

outline: groove medium;