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

1

Use consistent radius values (e.g., all 5px) for a harmonious look

2

Combine sharp elements (0px) with some rounded components for visual interest

3

Thicker borders (2px+) work well for high-contrast designs

4

Borderless (0px width) creates a minimalist aesthetic

Border settings

1

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)

2

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