outline

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

試してみましょう

構成要素のプロパティ

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

構文

css
/* 種類 */
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 つの値を用いて指定することができます。値は順不同です。すべての一括指定プロパティと同様に、除外したサブ値はその初期値に設定されます。

メモ: 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が none だからです。特筆すべき例外は input 要素で、ブラウザーが既定のスタイルを与えます。

<'outline-width'>

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

<'outline-style'>

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

<'outline-color'>

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

解説

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

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

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

アクセシビリティ

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

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素
継承なし
計算値一括指定の次の各プロパティとして
  • outline-width: 絶対的な長さ、キーワード none が指定されると計算値は 0 になる
  • outline-style: 指定通り
  • outline-color: キーワード auto の場合は、計算値も currentcolor。色の場合は、半透明であれば、計算値はそれに一致する rbga() で、不透明であれば、それに一致する rgb()。キーワード transparentrgba(0,0,0,0) に対応付けられる。
アニメーションの種類一括指定の次の各プロパティとして

形式文法

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

<outline-width> =
<line-width>

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

<outline-color> =
auto |
<color> |
<image-1D>

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

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

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

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

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

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

HTML

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

CSS

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;
}

結果

仕様書

Specification
CSS Basic User Interface Module Level 4
# outline

ブラウザーの互換性

BCD tables only load in the browser

関連情報