See all colors
<> <Box borderSide="all" padding="s" marginBottom="m">A</Box> <Box borderSide="all" padding="l">A</Box> </>
<Stack gap="s"> <Box width={30} height={20} borderSide="all" padding="m">A</Box> <Box maxWidth={50} borderSide="all" padding="m">A</Box> <Box width="min(320px, 50%)" borderSide="all" padding="m">A</Box> </Stack>
See all colors
<Box backgroundColor="shade10" color="shade2" padding="m">A</Box>
<Box position="relative" borderSide="all" width={40} height={30}> <Box top="s" right="s" position="absolute" borderSide="all" borderColor="content" width={20} height={15}/> </Box>
<Stack gap="s"> <Box radius="s" borderSide="all" padding="m">s</Box> <Box radius="m" borderSide="all" padding="m">m</Box> <Box radius="l" borderSide="all" padding="m">l</Box> <Box radius="1000px" borderSide="all" padding="m">custom</Box> </Stack>
<Stack gap="l"> <Box shadow="s" radius="m" padding="l">s</Box> <Box shadow="m" radius="m" padding="l">m</Box> <Box shadow="l" radius="m" padding="l">l</Box> </Stack>
<Stack gap="m"> <Box width="fit-content" borderSide="all">all</Box> <Box width="fit-content" borderColor="red" borderSide="all">all</Box> <Box width="fit-content" borderWidth="2px" borderColor="red" borderSide="left">left</Box> <Box width="fit-content" borderWidth="2px" borderColor="red" borderSide="right">right</Box> <Box width="fit-content" borderWidth="2px" borderColor="red" borderSide="top">top</Box> <Box width="fit-content" borderWidth="2px" borderColor="red" borderSide="bottom">bottom</Box> <Box width="fit-content" borderWidth="2px" borderColor="red" borderSide="x">x</Box> <Box width="fit-content" borderWidth="2px" borderColor="red" borderSide="y">y</Box> </Stack>
When borderSide
is specified but borderColor
is not, the default border
color will be used.
See all colors
<> <Box width="fit-content" borderSide="all" padding="s">Default border color</Box> <Box width="fit-content" borderSide="all" borderColor="content" padding="s">Assigned border color</Box> </>
<Box borderWidth="1px" borderSide="left" borderColor="red" padding="s">Content</Box>
<> <Box aspectRatio="4/3" width={20} borderSide="all"/> </>
<Box cursor="pointer" padding="xxl" width="fit-content" radius="m" borderSide="all" borderColorHover="blue" transition="var(--grn-transition-leave)" transitionHover="var(--grn-transition-hover)" shadow="s" shadowHover="m" color="content2" colorHover="blue" backgroundColor="fade1" backgroundColorHover="background" > Hover me </Box>