Border Radius
Atomic props for controlling the border radius of an element.
| Atomic Props | CSS Properties |
|---|---|
| rounded-{value} / rounded={value} | border-radius: {value}; |
| roundedFull | border-radius: 9999px; |
| roundedNone | border-radius: none; |
| roundedTiny | border-radius: 2px; |
| roundedSmall | border-radius: 4px; |
| roundedMedium | border-radius: 6px; |
| roundedLarge | border-radius: 8px; |
| roundedHuge | border-radius: 12px; |
| roundedGigantic | border-radius: 16px; |
| roundedTop-{value} / roundedTop={value} | border-top-left-radius: {value}; border-top-right-radius: {value}; |
| roundedRight-{value} / roundedRight={value} | border-top-right-radius: {value}; border-bottom-right-radius: {value}; |
| roundedBottom-{value} / roundedBottom={value} | border-bottom-left-radius: {value}; border-bottom-right-radius: {value}; |
| roundedLeft-{value} / roundedLeft={value} | border-top-left-radius: {value}; border-bottom-left-radius: {value}; |
| roundedTopLeft-{value} / roundedTopLeft={value} | border-top-left-radius: {value}; |
| roundedTopRight-{value} / roundedTopRight={value} | border-top-right-radius: {value}; |
| roundedBottomLeft-{value} / roundedBottomLeft={value} | border-bottom-left-radius: {value}; |
| roundedBottomRight-{value} / roundedBottomRight={value} | border-bottom-right-radius: {value}; |
Preset value#
Use rounded{size} to set rounded corner of an element.
SyntaxError: Unexpected token (1:8)
1 : return ()
^LIVE DEMO
Precise value#
Use rounded-{size} to set rounded corner of an element.
SyntaxError: Unexpected token (1:8)
1 : return ()
^LIVE DEMO
One sides corners#
Use rounded{Top|Right|Bottom|Left}-{size} to set one side corner of an element.
SyntaxError: Unexpected token (1:8)
1 : return ()
^LIVE DEMO
Single cornner#
Use rounded{TopLeft|TopRight|BottomLeft|BottomRight}-{size} to single corner of an element.
SyntaxError: Unexpected token (1:8)
1 : return ()
^LIVE DEMO
roundedFull#
Use the roundedFull props to create pills and circles.
SyntaxError: Unexpected token (1:8)
1 : return ()
^LIVE DEMO
roundedNone#
Use the roundedNone props to set none rounded.
SyntaxError: Unexpected token (1:8)
1 : return ()
^LIVE DEMO