outline:アウトラインのスタイル・太さ・色を指定する

適用対象 全ての要素
継承 しない

outlineプロパティは、アウトラインの表示方法をまとめて指定する際に使用します。スタイル・太さ・色のうち、指定したい値を好きな順序で、スペースで区切って記述します。輪郭線を表示させる場合には、必ずoutline-styleの値を変えましょう。

borderプロパティと違い、スペースを取らないためレイアウトに影響を与えません。また、上下左右に独立した指定をする事は出来ません。

outlineに与えられる値

outline: 幅 スタイル 色;
アウトラインに関するスタイルを一括して指定します。それぞれの値に関する指定方法は個別のプロパティを参照して下さい。

outlineの使用サンプル

CSS
.box_sample {
 outline: 1px solid #FF9900;
 padding: 5px;
 margin-bottom: 10px;
}
.input_sample01 {
 outline: 3px solid #0000FF;
}
.input_sample02 {
 outline: 1px dotted #0000FF;
}
XHTML
<div class="box_sample">
<input type="text" value="" size="60" class="input_sample01" /">
</div>

<div class="box_sample">
<input type="text" value="" size="60" class="input_sample02" /">
</div>
表示確認

outlineに関連するCSSプロパティ

ボーダー・アウトライン
border 要素の周囲に境界線を付ける
border-bottom 要素の底辺に境界線を付ける
border-bottom-color 要素の底辺に表示する境界線の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に表示する境界線の形状を指定する
border-bottom-width 要素の底辺に表示する境界線の幅を指定する
border-collapse 表のセル同士が隣接する境界線を共有するか分離するかを指定する
border-color 要素の境界線の色を指定する
border-image 要素の境界線に画像を指定する
border-image-outset 境界線の画像が要素の縁からはみ出す距離を指定する
border-image-repeat 境界線に表示させる画像の繰り返し方を指定する
border-image-slice 境界線に指定した画像の使用範囲を指定する
border-image-source 境界線に使用する画像ファイルを指定する
border-image-width 境界線に指定した画像の幅を指定する
border-left 要素の左辺に境界線を付ける
border-left-color 要素の左辺に表示する境界線の色を指定する
border-left-style 要素の左辺に表示する境界線の形状を指定する
border-left-width 要素の左辺に表示する境界線の幅を指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺に境界線を付ける
border-right-color 要素の右辺に表示する境界線の色を指定する
border-right-style 要素の右辺に表示する境界線の形状を指定する
border-right-width 要素の右辺に表示する境界線の幅を指定する
border-spacing 表に含まれるセル同士の間隔を指定する
border-style 境界線の形状を指定する
border-top 要素の上辺に境界線を付ける
border-top-color 要素の上辺に表示境界線の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に表示する境界線の形状を指定する
border-top-width 要素の上辺に表示する境界線の幅を指定する
border-width 境界線の幅を指定する
outline アウトラインの表示方法をまとめて指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインのオフセット値を指定する
outline-style アウトラインのスタイルを指定する
outline-width アウトラインの太さを指定する