Borders

border, border-top, border-right, border-bottom, border-left, border-block, border-block-end, border-block-start, border-inline, border-inline-end, border-inline-start

Example

Edit the props to see this component update live!

jsx

function BoxWithBorder({ className }) {
  return (
    <Box
      className={className}
      sx={{
        width: "150px",
        height: "150px",
        borderColor: "secondary",
        borderStyle: "topRight",
        borderWidth: "thick",
      }}
    />
  )
}

function BoxWithBorder({ className }) {
  return (
    <Box
      className={className}
      sx={{
        width: "150px",
        height: "150px",
        borderColor: "secondary",
        borderStyle: "topRight",
        borderWidth: "thick",
      }}
    />
  )
}

Borders should be defined using individual CSS border properties (borderColor, borderStyle, borderWidth) instead of using the border shorthand property. You can pass colors defined in the theme's colors object to borderColor.

Border shorthand

Theme-ui allows you to define values for the border property. These can be placed in the borders object. However, there is no way to pull values from the theme colors object, or the border-styles object when defining a border property. Therefore this theme does not define border properties.

Instead borders can be defined in variants where the theme colors and border-styles can be used directly. For example, in the layout variant for this theme the border for the aside is defined like this:

json

aside: {
  p: [2, "", 3],
  borderWidth: [null, null, "thin"],
  borderColor: [null, null, "muted"],
  borderStyle: [null, null, "topLeft"],
},

Theme

theme.borderStyles

json
{
  "solid": "solid",
  "dashed": "dashed",
  "dotted": "dotted",
  "right": "none solid none none",
  "left": "none none none solid",
  "top": "solid none none none",
  "bottom": "none none solid none",
  "topLeft": "solid none none solid",
  "topRight": "solid solid none none",
  "topBottom": "solid none solid none"
}

theme.borderWidths

json
{
  "thin": "1px",
  "default": "2px",
  "thick": "5px"
}