`border`

The border sprinkle provides a set of properties for styling an element’s border.

<Box
  border={{
    color: "primary.base",
    width: 100,
    style: "solid",
    radius: 300,
  }}
  size={300}
/>

Properties

`color`

The color property accepts a color from the theme’s color palette. The supported colors are sourced from both primitive.colors and semantic.colors.

<Row gap={200}>
  <Box border={{ color: "secondary.base", width: 100 }} size={300} />
  <Box border={{ color: "surface.outline", width: 100 }} size={300} />
  <Box border={{ color: "error.base", width: 100 }} size={300} />
</Row>

Note

It is recommended to use semantic colors whenever possible, as they are named for their purpose and represent the design system’s intent.

`width`

The width property sets the thickness of the border. It accepts values from the primitive.borderWidth token scale.

<Row gap={200}>
  <Box border={{ width: 100 }} size={300} />
  <Box border={{ width: 200 }} size={300} />
</Row>

`radius`

The radius property adds rounded corners to an element. It accepts values from the primitive.borderRadius token scale. You can also target sides like topRadius or individual corners with properties like topLeftRadius, and so on.

<Row gap={200}>
  <Box border={{ radius: 200, width: 100 }} size={300} />
  <Box border={{ radius: 600, width: 100 }} size={300} />
  <Box border={{ topRadius: 600, width: 100 }} size={300} />
  <Box border={{ topLeftRadius: 600, width: 100 }} size={300} />
</Row>

`style`

The style property sets the appearance of the border.

<Row gap={200}>
  <Box border={{ style: "dashed", width: 100 }} size={300} />
  <Box border={{ style: "dotted", width: 100 }} size={300} />
</Row>

Not all values from CSS are supported. Fusion’s supported border styles are:

solid
dashed
dotted