Border Radius

Atomic props for controlling the border radius of an element.

Atomic PropsCSS Properties
rounded-{value} / rounded={value}border-radius: {value};
roundedFullborder-radius: 9999px;
roundedNoneborder-radius: none;
roundedTinyborder-radius: 2px;
roundedSmallborder-radius: 4px;
roundedMediumborder-radius: 6px;
roundedLargeborder-radius: 8px;
roundedHugeborder-radius: 12px;
roundedGiganticborder-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