Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
エフェクト Widely available

Borders

要素の境界線を定義する最も基本的なCSSプロパティです。solid、dashed、dotted、double など多様な線スタイルと、各辺個別の設定が可能です。border-radius と組み合わせた角丸ボーダーや、ボーダーを使ったCSSアートなど、デザインの基礎として幅広く活用されます。

ボーダー装飾

概要

要素の境界線を定義する最も基本的なCSSプロパティです。solid、dashed、dotted、double など多様な線スタイルと、各辺個別の設定が可能です。border-radius と組み合わせた角丸ボーダーや、ボーダーを使ったCSSアートなど、デザインの基礎として幅広く活用されます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 3+
Firefox Android 14+

基本構文

CSS 
.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.divider {
  border-bottom: 2px dashed #ccc;
}

実務での使いどころ

  • カードUIの境界線デザイン

    カードコンポーネントに細いボーダーと角丸を適用し、コンテンツ領域を明確に区切るデザインを実現できます。

注意点

  • border はボックスモデルのサイズに影響します。box-sizing: border-box を使用しないと、ボーダーの太さ分だけ要素の全体サイズが大きくなります。

アクセシビリティ

  • ボーダーは視覚的な区切りとして重要です。フォーカスインジケーターとしてボーダーを使用する場合は、十分な太さとコントラストを確保してください。

参考リンク