# border

> 要素の境界線を指定するプロパティです。幅、スタイル、色を一括設定できます。solid、dashed、dotted、doubleなど様々なスタイルがあり、個別の辺（border-top等）も指定可能です。

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

## 構文

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

## Tailwindでは

- `border` → border-width: 1px
- `border-2` → border-width: 2px
- `border-t` → border-top-width: 1px
- `border-dashed` → border-style: dashed
- 一般形: `色は border-{color}-{shade}`
- 補足: v4では border の既定色がcurrentColorに変更された（v3はgray-200）。色の明示を推奨。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 1pxの実線でグレーのボーダー

```css
border: 1px solid #e5e7eb;
```

### 例2: 2pxの破線で青いボーダー

```css
border: 2px dashed #3b82f6;
```

## TIPS

border-radiusと組み合わせて角丸にするのが一般的。

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

hover時にborderを追加するとその分レイアウトがずれる問題に対し、AIは気づかないことがあります。定番の対策は最初からborder: 2px solid transparentを敷いておき色だけ変える方法（またはoutlineやbox-shadowの利用）です。ショートハンドが3項目（幅・スタイル・色）を一括リセットする点も混在バグの元です。

## AIへの依頼文例

- hoverでボーダーが付くとカードがガタつく問題を、transparentボーダー方式で修正して

## 関連プロパティ

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