# 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

{% stepper %}
{% step %}
Use consistent radius values (e.g., all 5px) for a harmonious look
{% endstep %}

{% step %}
Combine sharp elements (0px) with some rounded components for visual interest
{% endstep %}

{% step %}
Thicker borders (2px+) work well for high-contrast designs
{% endstep %}

{% step %}
Borderless (0px width) creates a minimalist aesthetic
{% endstep %}
{% endstepper %}

### Border settings

{% stepper %}
{% step %}
**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)
  {% endstep %}

{% step %}
**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
  {% endstep %}
  {% endstepper %}