Box

    <>
      <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>
  

    <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>
  

    <>      
      <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>