border

背景・装飾

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

構文

Syntax
border: <border-width> <border-style> <border-color>
🎮

インタラクティブデモ

コントロール

2px
0px20px

プレビュー

生成されたCSS

.element { border: 2px solid #3b82f6; }

コード例

1

border: 1px solid #e5e7eb;
実行結果
1pxの実線でグレーのボーダー

1pxの実線でグレーのボーダー

2

border: 2px dashed #3b82f6;
実行結果
2pxの破線で青いボーダー

2pxの破線で青いボーダー

💡 TIPS

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

関連プロパティ

ブラウザサポート

全ブラウザ対応