Border Width
要素の境界線の太さを定義し、UIの階層と視覚的な区切りを表現します。
Border Scale
0pxから8pxまでの5段階のボーダー幅
border-00px
border-11px
border-22px
border-44px
border-88px
Visual Comparison
1pxborder-12pxborder-24pxborder-48pxborder-8Use Cases
各コンテキストでの推奨ボーダー幅
よく使うパターン
ボーダー 要素
カード
border
1px
インプット
border
1px
フォーカス
border-2
2px
選択状態
border-2
2px
アクセント
border-l-4
4px
装飾
border-b-8
8px
Examples
カードボーダー
border
border-2
アクセントボーダー
border-l-2 - 軽い強調
border-l-4 - 中程度の強調
border-l-8 - 強い強調
ステータスインジケーター
成功
警告
エラー
情報