Borders
border は 一括指定 の CSS プロパティで、要素の境界を設定します。これは border-width, border-style, border-color の値を設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| その他 | ||||||
| border-bottom は一括指定の CSS プロパティで、要素の下側の境界を設定します。これは border-bottom-width、border-bottom-style、border-bottom-color の値を設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| border-bottom-color は CSS のプロパティで、要素の下側の境界線の色を設定します。一括指定プロパティの border-color または border-bottom でも設定することができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-bottom-style は CSS のプロパティで、要素の下側の境界線 (border) のスタイルを設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-bottom-width は CSS のプロパティで、ボックスの下の境界の幅を設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-color は一括指定を行う CSS のプロパティで、要素の境界の色を設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-left は一括指定の CSS プロパティで、要素の左側の境界のプロパティをすべて設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| border-left-color は CSS のプロパティで、要素の左側の境界線の色を設定します。一括指定プロパティの border-color または border-left でも設定することができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-left-style は CSS のプロパティで、要素の左側の境界線 (border) のスタイルを設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-left-width は CSS のプロパティで、要素の左側の境界の幅を設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-right は一括指定の CSS のプロパティで、要素の右側の境界のプロパティをすべて設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| border-right-color は CSS のプロパティで、要素の右側の境界線の色を設定します。一括指定プロパティの border-color または border-right でも設定することができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-right-style は CSS のプロパティで、要素の右側の境界線 (border) のスタイルを設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-right-width は CSS のプロパティで、要素の右側の境界の幅を設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-style は一括指定の CSS プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-top は一括指定の CSS プロパティで、要素の上側の境界のプロパティをすべて設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| border-top-color は CSS のプロパティで、要素の上側の境界線の色を設定します。一括指定プロパティの border-color または border-top でも設定することができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-top-style は CSS のプロパティで、要素の上側の境界 (border) における線のスタイルを設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-top-width は CSS のプロパティで、要素の上側の境界の幅を設定します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| border-width は一括指定の CSS のプロパティで、要素の境界の幅を設定します。 | 1 | 12 | 1 | 1 | 18 | 3 |
| CSS プロパティ | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 3 |
thick | 1 | 12 | 1 | 1 | 18 | 3 |
thin | 1 | 12 | 1 | 1 | 18 | 3 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| enumerated型は、線のスタイル、または線がないことを定義するキーワード値を表します。 キーワード値は、境界や段組みの以下の個別指定プロパティで用いられます。 | 1 | 12 | 1 | 1 | 18 | 3 |
- Firefox 50 より前では、角の丸い境界線スタイル (`border-radius` を使用) は、常に `border-bottom-style` が `solid` であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
- Firefox 50 より前では、角の丸い境界線スタイル (`border-radius` を使用) は、常に `border-bottom-style` が `solid` であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
- Firefox 50 より前では、角の丸い境界線スタイル (`border-radius` を使用) は、常に `border-bottom-style` が `solid` であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
- Firefox 50 より前では、角の丸い境界線スタイルは常に「border-style」が単線であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
- Firefox 50 より前では、角の丸い境界線スタイル (`border-radius` を使用) は、常に `border-top-style` が `solid` であるかのようにレンダリングされていました。 この問題は Firefox 50 で修正されました。
基本構文
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.divider {
border-bottom: 2px dashed #ccc;
}ライブデモ
実務での使いどころ
-
カードUIの境界線デザイン
カードコンポーネントに細いボーダーと角丸を適用し、コンテンツ領域を明確に区切るデザインを実現できます。
注意点
- border はボックスモデルのサイズに影響します。box-sizing: border-box を使用しないと、ボーダーの太さ分だけ要素の全体サイズが大きくなります。
アクセシビリティ
- ボーダーは視覚的な区切りとして重要です。フォーカスインジケーターとしてボーダーを使用する場合は、十分な太さとコントラストを確保してください。