Skip to content
Borders
Border styling helps define your brand’s visual tone. Choose between rounded edges for a friendly, approachable look or sharp corners for a modern, bold aesthetic.
FAQs
Border settings
| Setting | Description |
|---|---|
| Button radius | Controls the corner rounding for buttons. Lower values create sharper corners while higher values make buttons more rounded. |
| Input radius | Sets the corner rounding for form fields. A value of 5px is recommended for a friendly but clean look. |
| Element radius | Controls corner rounding for content sections. Set to 0px for sharp edges that create a more modern layout. |
| Button width | Determines the thickness of button borders. Standard is 1px, but can be increased for emphasis or set to 0px for a borderless look. |
| Input width | Sets the thickness of borders around form fields. A value of 1px is recommended for clean form fields. |
| Element width | Controls the thickness of borders around content sections. Standard is 1px for subtle framing. |
Helpful tips
- Use consistent radius values (e.g., all 5px) for a harmonious look
- Combine sharp elements (0px) with some rounded components for visual interest
- Thicker borders (2px+) work well for high-contrast designs
- Borderless (0px width) creates a minimalist aesthetic