> This page is for Flowkit CSS Framework, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Border

> Border variables and how they are used in the Webflow CSS Framework.

Border variables control visual boundaries between components like buttons, cards, input fields, and other UI elements. These are divided into:

* **Border Color** — Defines the visible stroke color.
* **Radius** — Defines the border corner roundness (border-radius).

These values can be applied using variables or utility classes, and may vary between projects depending on style preferences.

---

## Border Color

Border color variables follow a naming pattern based on surface context or visual intent.

* Border Primary
* Border Secondary
* Border Inverse Primary
* Border Inverse Secondary
* Border Accent

These colors reference the foundational colors like `Neutral` or `Accent` and may include opacity (e.g. `Neutral Inverse A50`). The exact mapping is managed in the Variables panel.

Border color variables are applied to style the border or box shadow style of elements. For example, dividers and input fields are using border styles. Buttons and cards components are using box shadow styles.

---

## Border Radius

Radius variables define how rounded the corners of elements should be. These values are used consistently across cards, buttons, input fields, etc.

**Common radius sizes:**

* Small Radius
* Medium Radius
* Large Radius
* X Large Radius

---

> **Utility Classes**
>
> To apply or override border radius styles consistently across elements, use the available utility classes. You can find the full list and usage examples in the [Border Radius Utilities](/flowkit/reference/utilities#border-radius) section.