outline-styleプロパティ

TOPページに戻る > CSS

outline-styleプロパティ

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

使い方（書式）

セレクタ { outline-style: 値; }                                    

outline-styleプロパティ

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

プロパティの値	説明
solid	実線を表示
dotted	点線を表示
dashed	破線を表示
double	二重線で表示
groove	立体的な線
ridge	立体的な線
inset	立体的な線
outset	立体的な線
none	枠線を表示しない。これが初期値
hidden	noneと同じく枠線を表示しない。古いバージョンのIEでは未対応

実際の指定方法

.hoge {
 outline-style: solid;   /* アウトラインの種類を指定  */
 outline-width: 1px;     /* pxでアウトラインの太さを指定  */
 outline-color: #FF6600; /* アウトラインの色を指定 */
 margin-bottom: 20px;    /* 下のマージンを20pxに指定 */
 width: 200px;           /* 要素の幅を200pxに指定 */
  }

.hoge2 {
 outline-style: dashed;   /* アウトラインの種類を指定 */
 outline-width: medium;  /* キーワードでアウトラインの太さを指定 */
 outline-color: #FF6600; /* アウトラインの色を指定 */
 width: 200px;           /* 要素の幅を200pxに指定 */
  }

html部分

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

実際の表示

outline-style: solid;

outline-style: dashed;