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

# Core — border-radius

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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `$borderRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to all corners of the element |
| `$borderTopRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to both top corners of the element |
| `$borderLeftRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to both left corners of the element |
| `$borderRightRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to both right corners of the element |
| `$borderBottomRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to both bottom corners of the element |
| `$borderTopLeftRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to the top left corner of the element |
| `$borderTopRightRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to the top right corner of the element |
| `$borderBottomLeftRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to the bottom left corner of the element |
| `$borderBottomRightRadius` | [radius](/foundations/radius) | undefined | Applies a border radius to the bottom right corner of the element |