> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/design-and-theming/theme-studio/border-width.md).

# Border Width

Border Width defines the thickness values available to Component border controls. The shared scale keeps outlines, dividers, cards, and controls visually consistent.

<figure><img src="/files/SzMfQeHo1bhMWF5ByZPy" alt="Theme Studio Border Width panel showing custom and inherited border widths in rem and pixels"><figcaption><p>Theme values can be reviewed and adjusted alongside project-specific custom widths.</p></figcaption></figure>

### Theme Border Widths

The standard theme scale contains:

| Name        |                                 Typical value |
| ----------- | --------------------------------------------: |
| `0`         |                                           0px |
| `1`         |                                           1px |
| `2`         |                                           2px |
| `4`         |                                           4px |
| `8`         |                                           8px |
| **Default** | The theme’s recommended general-purpose width |

The exact **Default** value belongs to the selected theme. Use it when a component needs a border but does not require a deliberately heavier or lighter treatment.

### Add or Adjust a Width

1. Open **Theme Studio → Border Width**.
2. To add a project-specific value, select the plus button beside Custom Border Width.
3. Enter a **Name** and set the rem value.
4. To customise the inherited scale for the project, adjust the relevant Theme Border Width row.
5. Review Components that already use the changed value.

Theme Studio displays the pixel equivalent beside each rem value. At the standard root size, `0.0625rem` is 1px.

{% hint style="warning" %}
Changing an established theme value updates every Component that references it. Use a new custom width when the change should not be global.
{% endhint %}

### Best Practices

* Use **Default** for most cards, fields, and controls.
* Use `0` to remove a border without changing the selected border style.
* Reserve heavier values for deliberate emphasis.
* Check that borders remain visible against both light and dark backgrounds.
* Keep focus outlines distinct from decorative borders.

See [Common Controls → Borders](/elements-docs/using-elements/components/common-controls/borders.md) for applying width, style, colour, and radius to Components.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/design-and-theming/theme-studio/border-width.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.