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.
Design 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
Border settings
Border Radius: Controls the corner rounding for different elements:
- Button Radius: Adjusts corner curvature for all buttons (0px = sharp, higher values = more rounded)
- Input Radius: Sets rounding for form fields (5px recommended for friendly but clean look)
- Element Radius: Controls corner rounding for content sections (0px = sharp edges for modern layouts)
Border Width: Determines the thickness of border lines:
- Button Width: 1px standard (thicker for emphasis, 0px for borderless)
- Input Width: 1px recommended for clean form fields
- Element Width: 1px standard for subtle framing of sections