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;
roundedSM	border-radius: 2px;
roundedMD	border-radius: 4px;
roundedLG	border-radius: 6px;
roundedXL	border-radius: 8px;
rounded2XL	border-radius: 12px;
rounded2XL	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.

Result

Loading...

Live Editor

<Box toEvenly> <Box square20 bgOrange400 roundedSM /> <Box square20 bgOrange400 roundedMD /> <Box square20 bgOrange400 roundedLG /> <Box square20 bgOrange400 roundedXL /> <Box square20 bgOrange400 rounded2XL /> <Box square20 bgOrange400 rounded3XL /> </Box>

<Box toEvenly>
  <Box square20 bgOrange400 roundedSM />
  <Box square20 bgOrange400 roundedMD />
  <Box square20 bgOrange400 roundedLG />
  <Box square20 bgOrange400 roundedXL />
  <Box square20 bgOrange400 rounded2XL />
  <Box square20 bgOrange400 rounded3XL />
</Box>

Precise value

Use rounded-{size} to set rounded corner of an element.

Result

Loading...

Live Editor

<Box toEvenly> <Box square-100 bgYellow200 rounded-6></Box> <Box square-100 bgRed200 rounded-10px></Box> <Box square-100 bgGreen200 rounded={20}></Box> <Box square-100 bgBlue200 rounded="50px"></Box> </Box>

<Box toEvenly>
  <Box square-100 bgYellow200 rounded-6></Box>
  <Box square-100 bgRed200 rounded-10px></Box>
  <Box square-100 bgGreen200 rounded={20}></Box>
  <Box square-100 bgBlue200 rounded="50px"></Box>
</Box>

One sides corners

Use rounded{Top|Right|Bottom|Left}-{size} to set one side corner of an element.

Result

Loading...

Live Editor

<Box toEvenly> <Box square-100 bgYellow200 roundedTop-20></Box> <Box square-100 bgRed200 roundedRight-20></Box> <Box square-100 bgGreen200 roundedBottom-20></Box> <Box square-100 bgBlue200 roundedLeft-20></Box> </Box>

<Box toEvenly>
  <Box square-100 bgYellow200 roundedTop-20></Box>
  <Box square-100 bgRed200 roundedRight-20></Box>
  <Box square-100 bgGreen200 roundedBottom-20></Box>
  <Box square-100 bgBlue200 roundedLeft-20></Box>
</Box>

Single cornner

Use rounded{TopLeft|TopRight|BottomLeft|BottomRight}-{size} to single corner of an element.

Result

Loading...

Live Editor

<Box toEvenly> <Box square-100 bgYellow200 roundedTopLeft-20></Box> <Box square-100 bgRed200 roundedTopRight-20></Box> <Box square-100 bgGreen200 roundedBottomLeft-20></Box> <Box square-100 bgBlue200 roundedBottomRight-20></Box> </Box>

<Box toEvenly>
  <Box square-100 bgYellow200 roundedTopLeft-20></Box>
  <Box square-100 bgRed200 roundedTopRight-20></Box>
  <Box square-100 bgGreen200 roundedBottomLeft-20></Box>
  <Box square-100 bgBlue200 roundedBottomRight-20></Box>
</Box>

roundedFull

Use the roundedFull props to create pills and circles.

Result

Loading...

Live Editor

<Box toEvenly> <Box w-200 h-100 bgYellow200 roundedFull></Box> <Box square-100 bgYellow200 roundedFull></Box> </Box>

<Box toEvenly>
  <Box w-200 h-100 bgYellow200 roundedFull></Box>
  <Box square-100 bgYellow200 roundedFull></Box>
</Box>

roundedNone

Use the roundedNone props to set none rounded.

Result

Loading...

Live Editor

<Box toEvenly> <Box square-100 bgYellow200 roundedNone></Box> </Box>

<Box toEvenly>
  <Box square-100 bgYellow200 roundedNone></Box>
</Box>