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.

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 class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

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

構成要素のプロパティ

このプロパティは以下の 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()。キーワード transparent は rgba(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

ブラウザーの互換性

関連情報