Borders are always solid and a fixed color. You can control the radius and size of borders.
Border radius
Border size
CSS variables
Border radius values are defined as a 5-step scale from smallest to largest.
| --border-radius-1 | 2px |
| --border-radius-2 | 4px |
| --border-radius-3 | 8px |
| --border-radius-4 | 16px |
| --border-radius-full | 9999px |
Border sizes are defined as a 4-step scale from smallest to largest.
| --border-size-1 | 1px |
| --border-size-2 | 2px |
| --border-size-3 | 4px |
| --border-size-4 | 8px |
Component props
| borderRadius | Responsive<"1" | "2" | "3" | "4" | "full"> |
| borderSize | Responsive<"1" | "2" | "3" | "4"> |