---
title: Border
description: Bamboo's border utilities.
---

Bamboo provides CSS properties for styling borders.

Every group below has a logical counterpart that resolves against the document's writing mode. `borderStartWidth` emits
`border-inline-start-width`, which is the left edge in LTR and the right edge in RTL. The radius shorthands compose
corners rather than mapping to a single property: `borderStartRadius` sets `border-start-start-radius` and
`border-end-start-radius`.

## Compound Properties

The border compound property maps to the `borders` token category.

| Prop                                | CSS Property        | Token Category |
| ----------------------------------- | ------------------- | -------------- |
| `border`                            | `border`            | `borders`      |
| `borderX` , `borderInline`          | `borderInline`      | `borders`      |
| `borderY` , `borderBlock`           | `borderBlock`       | `borders`      |
| `borderStart` , `borderInlineStart` | `borderInlineStart` | `borders`      |
| `borderEnd` , `borderInlineEnd`     | `borderInlineEnd`   | `borders`      |

## Border Radius

```jsx
<div className={css({ borderRadius: 'md' })} />
<div className={css({ rounded: 'md' })} /> // shorthand
<div className={css({ roundedTop: 'md' })} /> // one side
<div className={css({ roundedTopLeft: 'md' })} /> // one corner
```

| Prop                                           | CSS Property                        | Token Category |
| ---------------------------------------------- | ----------------------------------- | -------------- |
| `rounded`,`borderRadius`                       | `border-radius`                     | `radii`        |
| `roundedTopLeft`,`borderTopLeftRadius`         | `border-top-left-radius`            | `radii`        |
| `roundedTopRight`,`borderTopRightRadius`       | `border-top-right-radius`           | `radii`        |
| `roundedBottomRight`,`borderBottomRightRadius` | `border-bottom-right-radius`        | `radii`        |
| `roundedBottomLeft`,`borderBottomLeftRadius`   | `border-bottom-left-radius`         | `radii`        |
| `roundedTop`,`borderTopRadius`                 | `border-top-{left+right}-radius`    | `radii`        |
| `roundedRight`,`borderRightRadius`             | `border-{top+bottom}-right-radius`  | `radii`        |
| `roundedBottom`,`borderBottomRadius`           | `border-bottom-{left+right}-radius` | `radii`        |
| `roundedLeft`,`borderLeftRadius`               | `border-{top+bottom}-left-radius`   | `radii`        |

### Logical Properties

```jsx
<div className={css({ borderStartRadius: 'md' })} />
<div className={css({ roundedStart: 'md' })} /> // shorthand
```

| Prop                                         | CSS Property                      | Token Category |
| -------------------------------------------- | --------------------------------- | -------------- |
| `roundedStartStart`,`borderStartStartRadius` | `border-start-start-radius`       | `radii`        |
| `roundedStartEnd`,`borderStartEndRadius`     | `border-start-end-radius`         | `radii`        |
| `roundedStart`,`borderStartRadius`           | `border-{start+end}-start-radius` | `radii`        |
| `roundedEndStart`,`borderEndStartRadius`     | `border-end-start-radius`         | `radii`        |
| `roundedEndEnd`,`borderEndEndRadius`         | `border-end-end-radius`           | `radii`        |
| `roundedEnd` ,`borderEndRadius`              | `border-{start+end}-end-radius`   | `radii`        |

## Border Width

```jsx
<div className={css({ borderWidth: '1px' })} />
<div className={css({ borderTopWidth: '1px' })} /> // one side
```

| Prop                                 | CSS Property                |
| ------------------------------------ | --------------------------- |
| `borderWidth`                        | `border-width`              |
| `borderTopWidth`                     | `border-top-width`          |
| `borderLeftWidth`                    | `border-left-width`         |
| `borderRightWidth`                   | `border-right-width`        |
| `borderBottomWidth`                  | `border-bottom-width`       |
| `borderXWidth` , `borderInlineWidth` | `border-{left+right}-width` |
| `borderYWidth` , `borderBlockWidth`  | `border-{top+bottom}-width` |

### Logical Properties

```jsx
<div className={css({ borderStartWidth: '1px' })} />
```

| Prop                                          | CSS Property                |
| --------------------------------------------- | --------------------------- |
| `borderStartWidth` , `borderInlineStartWidth` | `border-inline-start-width` |
| `borderEndWidth` , `borderInlineEndWidth`     | `border-inline-end-width`   |

## Border Color

The border color utilities are used to set the border color of an element. It references the `colors` token category.

```jsx
<div className={css({ borderColor: 'primary' })} />
<div className={css({ borderTopColor: 'primary' })} /> // one side
```

| Prop                | CSS Property          | Token Category |
| ------------------- | --------------------- | -------------- |
| `borderColor`       | `border-color`        | `colors`       |
| `borderTopColor`    | `border-top-color`    | `colors`       |
| `borderLeftColor`   | `border-left-color`   | `colors`       |
| `borderRightColor`  | `border-right-color`  | `colors`       |
| `borderBottomColor` | `border-bottom-color` | `colors`       |

### Logical Properties

```jsx
<div className={css({ borderInlineStartColor: 'red.500' })} />
```

| Prop                                          | CSS Property                | Token Category |
| --------------------------------------------- | --------------------------- | -------------- |
| `borderStartColor` , `borderInlineStartColor` | `border-inline-start-color` | `colors`       |
| `borderEndColor` , `borderInlineEndColor`     | `border-inline-end-color`   | `colors`       |
| `borderXColor`, `borderInlineColor`           | `border-inline-color`       | `colors`       |
| `borderYColor`, `borderBlockColor`            | `border-block-color`        | `colors`       |
