Border Radius

There are 5 different sizes available: Tiny 1 Small 2 Regular 3 Regular 4 and Large 5.

import { Box } from '@marvelapp/ui';

Uniform Border radius

Uniform border radius is applied equally to all corners.

<Box borderRadius={0}></Box>
<Box borderRadius={1}></Box>
<Box borderRadius={2}></Box>
<Box borderRadius={3}></Box>
<Box borderRadius={4}></Box>

Unequal Border radius

Unequal border radius affects only a single corner of the element. The other corners remain unaffected.

<Box borderTopLeftRadius={4}></Box>
<Box borderTopRightRadius={4}></Box>
<Box borderBottomRightRadius={4}></Box>
<Box borderBottomLeftRadius={4}></Box>

Props

See Box for all the available properties.