# outline

> 要素の周囲に輪郭線を描画するプロパティです。borderと似ていますが、レイアウトに影響しません。フォーカス時の視覚フィードバックに使用され、アクセシビリティの観点から重要です。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/outline/

## 構文

```css
outline: <outline-width> <outline-style> <outline-color>
```

## Tailwindでは

- `outline-2` → outline-width: 2px
- `outline-offset-2` → outline-offset: 2px
- `outline-hidden` → 不可視アウトライン（forced-colors時のみ表示）
- `outline-none` → outline-style: none
- 補足: v4で旧outline-noneはoutline-hiddenに改名。新しいoutline-noneは本当にoutlineを消すので、フォーカスリングの代替を必ず用意する。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 94+ / Firefox 88+ / Safari 16.4+ / Edge 94+
- 補足: outline自体は全ブラウザで古くから利用可能。記載バージョンは角丸への追従など仕様準拠が完成した時点

## コード例

### 例1: 青色の2px実線アウトライン

```css
outline: 2px solid blue;
```

### 例2: 赤色の3px破線アウトライン

```css
outline: 3px dashed red;
```

### 例3: アウトラインを無効化（アクセシビリティ注意）

```css
outline: none;
```

### 例4: アウトラインと要素の間に5pxの隙間

```css
outline-offset: 5px;
```

## TIPS

フォーカス状態の表示に使われる。borderと違いレイアウトに影響しない。outline: none;を使う場合は代替のフォーカススタイルを必ず用意する。

## よくある間違い

outline: none;でフォーカス表示を消すとアクセシビリティ問題。代わりに独自のフォーカススタイルを実装する。outline-offsetで位置調整可能。

## AIがよく間違えるポイント

outlineはレイアウトに影響しない（スペースを取らない）点がborderとの本質的な違いで、フォーカス表示に使われる理由です。outline: noneでフォーカスを消すのは禁じ手で、消したいならoutline-offsetや色の調整で「見やすくする」方向へ。border-radiusに追従する（現在は角丸に沿う）ようになった点はAIの知識が古いことがあります。

## AIへの依頼文例

- フォーカスリングをブランドに合わせて調整して。消さずにoutline-offsetと色で見やすく

## 関連プロパティ

- [border](https://www.css-dictionary.com/property/border.md)
- [box-shadow](https://www.css-dictionary.com/property/box-shadow.md)