---
title: "Core — border"
canonical: https://sky-ui.cf.sky.com/core/system/border
---

# Core — border

Applying the `border` system modifier to your component will allow consumers of your component to pass in the following props:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `$border` | boolean | undefined | Applies a border to all sides of the element |
| `$borderTop` | boolean | undefined | Applies a border to the top of the element |
| `$borderBottom` | boolean | undefined | Applies a border to the bottom of the element |
| `$borderLeft` | boolean | undefined | Applies a border to the left of the element |
| `$borderRight` | boolean | undefined | Applies a border to the right of the element |
| `$borderX` | boolean | undefined | Applies a border to the left and right of the element |
| `$borderY` | boolean | undefined | Applies a border to the top and bottom of the element |
| `$borderColor` | [colors](/foundations/colours) | undefined | Sets the border color which effects all sides |