> This page is for Product.

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

# Border

> Border is used to define the boundary around an element, providing visual separation and emphasis within a page.

Border is used to define the boundary around an element, providing visual separation and emphasis within a page.

You can customize a border's **thickness**, **color**, and **style** to enhance the overall design and highlight specific content. Border can be applied to all edges uniformly or to specific sides of an element.

## Thickness

Thickness refers to the width of the border around an element. Specifying border thickness helps create elements with varying visual emphasis, from subtle accents to bold outlines.

## Color

You can select from your [site colors](/product/docs/the-visual-builder/theming#colors) to use as a border color. Customizing border color adds visual interest, creates contrast, and reinforces branding.

## Style

Choose from styles like dotted, dashed, or solid lines to suit different design preferences. Dotted lines create a pattern of small dots; dashed lines consist of short dashes separated by spaces; and solid lines provide a continuous, unbroken border.

## Examples

Apply borders to boxes to make them pop out as cards.

![Card borders](/_fern-files/makeswift.docs.buildwithfern.com/a62eda017cc15118651d4cb650f99d0a49c2212ec0c9d601aff36d0f3df2f540/images/property-panels/borders1.gif)

You can apply borders to specific sides to create dividers between elements.

![Borders as dividers](/_fern-files/makeswift.docs.buildwithfern.com/9d175760459bb83d3e7513007865f54b6cb354f19bbbbcb3a864be53fc2ef341/images/property-panels/borders2.gif)

## Pro tips

Borders complement shadows, giving your boxes a crisper edge and emphasizing the depth of the shadow. Lower the border color opacity to create a more subtle effect.

![Shadows and borders compliment
eachother](/_fern-files/makeswift.docs.buildwithfern.com/01b64716113cbfb51467d1c7c3397608b4981e5a70fea9824d3543e22b10f639/images/property-panels/borders3.gif)

## Shortcuts

While dragging the border panel inputs, hold the `⌥ Option` or `Alt` key to equally change border width on both sides of an element. Hold `⇧ Shift  + ⌥ Option` or `Alt` to equally change border width for all sides.

![⌥ Option (or Alt) hotkey for changing
borders](/_fern-files/makeswift.docs.buildwithfern.com/bad2a512f0225f2e434c40d4462eb70fa495293c4e068c06362fc163719d156b/images/property-panels/borders5.gif)

## Developer notes

You can give your team control over the border property for any custom component using the [Style](/developer/docs/reference/controls/style) control.