> 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/components/common-controls/borders.md).

# Borders

Borders draw an outline around a component and can also round its corners. The shared control supports Static borders and animated Start/End states.

{% embed url="<https://youtu.be/PaWL7Vieoh8?si=Y56iftuks4qwy6z1>" %}

### Type

**Type** is not responsive and normally defaults to None.

* **None** — Applies no border classes.
* **Static** — Applies one border style.
* **Hover** — Reveals Start and End states.

Input-style controls use a specialised border that defaults to Static.

### State

**State** appears for Hover and defaults to Start.

* **Start** — The resting border.
* **End** — The border shown while the component itself is hovered.

Unlike Effects, Filters, and Transforms, the shared Borders control does not provide a separate Hover Over target.

### Style

**Style** defaults to Solid.

* **Solid** — Draws one continuous line.
* **Dashed** — Draws a sequence of dashes.
* **Dotted** — Draws a sequence of dots.

### Colour and Opacity

**Color** uses Theme Studio colours and normally defaults to Surface 500.

**Opacity** ranges from 0–100% and defaults to 100%.

### Width

**Width** controls Top, Right, Bottom, and Left border thickness. Link opposite sides for symmetrical borders or set them independently.

The general and Container variants default to 0 on every side. Input borders use the Theme Default width in their initial Static state.

### Radius

**Radius** controls the four corners. Link corners for one radius or set them independently.

The general variant defaults to the Theme Default radius. Container and Input variants default to None.

{% hint style="info" %}
A radius can clip a visible background only when the component’s overflow and rendering structure support it. If child content extends outside rounded corners, set [Layout → Overflow](/elements-docs/using-elements/components/common-controls/layout.md#overflow) to Hidden.
{% endhint %}

### Hover Borders

Configure Start and End, then add a [Transition](/elements-docs/using-elements/components/common-controls/transitions.md). Select Colors or Most Common to animate colour; width and radius animation may require All.

## Border UI in Elements

<figure><img src="/files/zpfKAM2B3VsBSaa1jnBG" alt="Border controls for type, style, colour, width, and radius"><figcaption><p>Border controls support separate sides, corners, and hover states.</p></figcaption></figure>


---

# 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/components/common-controls/borders.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.