• Docs
  • Blog

    • 0.24.0

    • Switch to dark mode
    Get Started
    Components
    Styling
    Theming

    Concepts

    Cerberus FactoryResponsive DesignCSS VariablesThemes & Color ModesColor Opacity ModifierConditional StylesVirtual ColorCascade Layers

    Compositions

    Animation StylesText Styles

    Style Props

    BackgroundBorderEffectsSpacingText GradientTransitionsZ-Index

    Border

    JSX style props for styling border and border radius.

    Border Radius

    All sides

    Use the rounded or borderRadius props to apply border radius on all sides of an element.

    <Box borderRadius="md" />
    <Box rounded="md" /> // shorthand
    PropCSS PropertyToken Category
    rounded, borderRadiusborder-radiusradii

    Specific sides

    Use the rounded{Left,Right,Top,Bottom} or border{Left,Right,Top,Bottom}Radius prop, to apply border radius on a specific side of an element.

    <Box borderTopRadius="md" />
    <Box roundedTop="md" /> // shorthand
    

    <Box borderLeftRadius="md" />
    <Box roundedLeft="md" /> // shorthand

    Use the logical equivalent to make the border radius adapt based on the text direction.

    <Box roundedStart="md" />
    <Box roundedEnd="md" />
    PropCSS PropertyToken Category
    roundedLeft, borderLeftRadiusborder-left-radiusradii
    roundedRight, borderRightRadiusborder-right-radiusradii
    roundedTop, borderTopRadiusborder-top-radiusradii
    roundedBottom, borderBottomRadiusborder-bottom-radiusradii
    roundedStart, borderStartRadiusborder-start-start-radius, border-end-start-radiusradii
    roundedEnd, borderEndRadiusborder-start-end-radius, border-end-end-radiusradii

    Specific corners

    Use the border{Top,Bottom}{Left,Right}Radius properties, or the shorthand equivalent to round a specific corner.

    <Box borderTopLeftRadius="md" />
    <Box roundedTopLeft="md" /> // shorthand

    Use the logical properties to adapt based on the text direction.

    <Box borderStartStartRadius="md" />
    <Box roundedStartStart="md" /> // shorthand
    PropCSS PropertyToken Category
    roundedTopLeft,borderTopLeftRadiusborder-top-left-radiusradii
    roundedTopRight,borderTopRightborder-top-right-radiusradii
    roundedBottomRight,borderBottomRightborder-bottom-right-radiusradii
    roundedBottomLeft,borderBottomLeftborder-bottom-left-radiusradii

    Border Width

    All sides

    Use the borderWidth prop to apply border width on all sides of an element.

    <Box borderWidth="1px" />
    PropCSS PropertyToken Category
    borderWidthborder-widthborderWidths

    Specific sides

    Use the border{Left|Right|Top|Bottom}Width prop to apply border width on a specific side of an element.

    <Box borderTopWidth="1px" />
    <Box borderLeftWidth="1px" />

    Use the logical equivalent to make the border width adapt based on the text direction.

    <Box borderInlineStartWidth="1px" />
    <Box borderInlineWidth="1px" /> // shorthand
    PropCSS PropertyToken Category
    borderTopWidthborder-top-widthborderWidths
    borderLeftWidthborder-left-widthborderWidths
    borderRightWidthborder-right-widthborderWidths
    borderBottomWidthborder-bottom-widthborderWidths
    borderStartWidth , borderInlineStartWidthborder-{start+end}-width
    borderEndWidth , borderInlineEndWidthborder-{start+end}-width
    borderXWidth , borderInlineWidthborder-{left,right}-widthborderWidths
    borderYWidth , borderBlockWidthborder-{top,bottom}-widthborderWidths

    Border Color

    All sides

    Use the borderColor prop to apply border color on all sides of an element.

    <Box borderColor="red.400" />
    

    // with opacity modifier
    <Box borderColor="red.400/20" />

    Specific sides

    Use the border{Left,Right,Top,Bottom}Color prop to apply border color on a specific side of an element.

    <Box borderTopColor="red.400" />
    <Box borderLeftColor="red.400" />

    Use the logical properties to adapt based on the text direction.

    <Box borderStartColor="red.400" />
    <Box borderEndColor="red.400" />
    PropCSS PropertyToken Category
    borderColorborder-colorcolors
    borderTopColorborder-top-colorcolors
    borderLeftColorborder-left-colorcolors
    borderRightColorborder-right-colorcolors
    borderBottomColorborder-bottom-colorcolors
    borderStartColor , borderInlineStartColorborder-{start,end}-colorcolors
    borderEndColor , borderInlineEndColorborder-{start,end}-colorcolors
    borderXColor, borderInlineColorborder-inline-colorcolors
    borderYColor, borderBlockColorborder-block-colorcolors

    Divide Width

    Use the divide{X,Y}Width prop to apply border width between elements. It uses the CSS selector > * + * to apply the border* properties.

    <Box divideXWidth="1px">
      <Box>1</Box>
      <Box>2</Box>
    </Box>
    

    <Box divideYWidth="1px">
      <Box>1</Box>
      <Box>2</Box>
    </Box>
    PropCSS PropertyToken Category
    divideWidthborder-{inline,block}-start-widthborderWidths

    Divide Color

    Use the divideColor prop to apply border color between elements.

    <Box divideColor="red.400">
      <Box>1</Box>
      <Box>2</Box>
    </Box>
    PropCSS PropertyToken Category
    divideColor--divide-colorcolors

    Divide Style

    Use the divideStyle prop to apply border style between elements.

    <Box divideX="2px" divideStyle="dashed">
      <Box>1</Box>
      <Box>2</Box>
    </Box>
    PropCSS PropertyToken Category
    divideStyle--divide-styleborderStyle

    On this page

    • Edit this page on Github
    Cerberus Design System | Docs