Skip to main navigationSkip to main content
Return to Sky UI homepage

system - border-radius

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

PropTypeDefaultDescription
$borderRadiusradiusundefinedApplies a border radius to all corners of the element
$borderTopRadiusradiusundefinedApplies a border radius to both top corners of the element
$borderLeftRadiusradiusundefinedApplies a border radius to both left corners of the element
$borderRightRadiusradiusundefinedApplies a border radius to both right corners of the element
$borderBottomRadiusradiusundefinedApplies a border radius to both bottom corners of the element
$borderTopLeftRadiusradiusundefinedApplies a border radius to the top left corner of the element
$borderTopRightRadiusradiusundefinedApplies a border radius to the top right corner of the element
$borderBottomLeftRadiusradiusundefinedApplies a border radius to the bottom left corner of the element
$borderBottomRightRadiusradiusundefinedApplies a border radius to the bottom right corner of the element
border-radius | Sky UI Design System