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 valueUse rounded{size}
to set rounded corner of an element.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
Precise valueUse rounded-{size}
to set rounded corner of an element.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
One sides cornersUse rounded{Top|Right|Bottom|Left}-{size}
to set one side corner of an element.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
Single cornnerUse rounded{TopLeft|TopRight|BottomLeft|BottomRight}-{size}
to single corner of an element.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
roundedFullUse the roundedFull
props to create pills and circles.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
roundedNoneUse the roundedNone
props to set none rounded.
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO