> ## Documentation Index
> Fetch the complete documentation index at: https://makeswift-docs-branch.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Border

> 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/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.

<Frame>
  <img src="https://mintcdn.com/makeswift-docs-branch/qFmu781C7ke_MJk2/images/property-panels/borders1.gif?s=6cbf10e4699a73e8cc03c3a5b47bea0a" alt="Card borders" width="800" height="450" data-path="images/property-panels/borders1.gif" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/makeswift-docs-branch/qFmu781C7ke_MJk2/images/property-panels/borders2.gif?s=0e8ff4fc71d2d145f076ce849d97d331" alt="Borders as dividers" width="800" height="450" data-path="images/property-panels/borders2.gif" />
</Frame>

## 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.

<Frame>
  <img
    src="https://mintcdn.com/makeswift-docs-branch/qFmu781C7ke_MJk2/images/property-panels/borders3.gif?s=860609c07eff38b123828ad3c361baf0"
    alt="Shadows and borders compliment
eachother"
    width="800"
    height="450"
    data-path="images/property-panels/borders3.gif"
  />
</Frame>

## 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.

<Frame>
  <img
    src="https://mintcdn.com/makeswift-docs-branch/qFmu781C7ke_MJk2/images/property-panels/borders5.gif?s=bab3699dd7fb83dc68c780ee86c666af"
    alt="⌥ Option (or Alt) hotkey for changing
borders"
    width="800"
    height="450"
    data-path="images/property-panels/borders5.gif"
  />
</Frame>

## Developer notes

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