# Borders

Border settings in **Theme settings > Borders** control corner radius and border width for buttons, form inputs, and other page elements across the storefront.

## How to change theme borders

{% stepper %}
{% step %}

#### Adjust radius

* Open **Theme settings > Borders**.
* Under **Radius**, set **Button radius**, **Input radius**, and **Element radius**.
  {% endstep %}

{% step %}

#### Adjust width

* Under **Width**, set **Button width**, **Input width**, and **Element width**.
  {% endstep %}

{% step %}

#### Preview the storefront

* Open key templates such as home, collection, product, and cart.
* Check buttons, fields, and cards on desktop and mobile before publishing.
  {% endstep %}
  {% endstepper %}

### Notes on borders

* **Button** and **Input** settings apply to those components; **Element** applies more broadly to other bordered surfaces.
* A width of **0** removes the visible border for that category where the theme uses these values.
* Input outline shape also works with **Border position** under **Theme settings > Inputs** (full border vs bottom edge only).

## Border settings

### Radius

| Setting        | What it controls                                                 |
| -------------- | ---------------------------------------------------------------- |
| Button radius  | Corner radius for buttons (0–50 px, default 50 px).              |
| Input radius   | Corner radius for form inputs (0–50 px, default 50 px).          |
| Element radius | Corner radius for general page elements (0–50 px, default 5 px). |

### Width

| Setting       | What it controls                                                   |
| ------------- | ------------------------------------------------------------------ |
| Button width  | Border thickness for buttons (0–5 px, default 1 px).               |
| Input width   | Border thickness for inputs (0–5 px, default 1 px).                |
| Element width | Border thickness for general page elements (0–5 px, default 1 px). |