outline はCSS の一括指定プロパティで、輪郭線 (outline) に関する大部分のプロパティを単一の宣言で設定します。

試してみましょう

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgba(170, 50, 220, 0.6);border-radius: 2rem;

<section>  <div>    This is a box with an outline around it.  </div></section>

#example-element {  padding: 0.75rem;  width: 80%;  height: 100px;}

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

• outline-width
• outline-style
• outline-color

構文

/* 種類 */outline: solid;/* 種類 | 色 */outline: dashed #f66;/* 幅 | 種類 */outline: thick inset;/* 幅 | 種類 | 色 */outline: 3px solid green;/* グローバル値 */outline: inherit;outline: initial;outline: revert;outline: revert-layer;outline: unset;

outline プロパティは以下に挙げた 1 ～ 3 つの値を用いて指定することができます。値は順不同です。すべての一括指定プロパティと同様に、除外したサブ値はその初期値に設定されます。

値

<'outline-width'>

輪郭線の太さを設定します。未指定の場合の既定値はmedium です。outline-width を参照してください。

<'outline-style'>

輪郭線の種類を設定します。未指定の場合の既定値はnone です。outline-style を参照してください。

<'outline-color'>

輪郭線の色を設定します。既定値は、対応しているブラウザーではinvert で、それ以外ではcurrentcolor です。outline-color を参照してください。

解説

輪郭線は要素の境界線の外側の線です。輪郭線はボックスの他の領域とは異なり、空間を取らないので、文書内のレイアウトに影響を与えません。

輪郭線の外観に影響を与えるプロパティはいくつかあります。スタイル、色、幅はoutline プロパティを使用し、境界線からの距離はoutline-offset プロパティを使用し、角の丸みはborder-radius プロパティを使用することで変更することが可能です。

輪郭線は長方形であるとは限りません。複数行のテキストを扱う場合、ブラウザーによっては各行ごとに輪郭線を描画するものもあれば、テキスト全体を単一の輪郭線で囲むものもあります。

アクセシビリティ

outline の値を0 またはnone にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。

• How to Design Useful and Usable Focus Indicators
• WCAG 2.1:達成基準 2.4.7 の理解: フォーカスの可視性

公式定義

形式文法

outline =
<'outline-width'>||
<'outline-style'>||
<'outline-color'>

<outline-width> =
<line-width>

<outline-style> =
auto|
<outline-line-style>

<outline-color> =
auto|
<'border-top-color'>

<line-width> =
<length [0,∞]>|
thin|
medium|
thick

<border-top-color> =
<color>|
<image-1D>

<image-1D> =
<stripes()>

<stripes()> =
stripes(<color-stripe>#)

<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?

<length-percentage> =
<length>|
<percentage>

例

輪郭線を使用してフォーカスのスタイルを設定

HTML

<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>

CSS

a {  border: 1px solid;  border-radius: 3px;  display: inline-block;  margin: 10px;  padding: 5px;}a:focus {  outline: 4px dotted #e73;  outline-offset: 4px;  background: #ffa;}

結果

仕様書

ブラウザーの互換性

関連情報

• outline-width
• outline-style
• outline-color
• border