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 プロパティの一括指定です。

• 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