---
title: Borders
path: utilities/borders
status: Stable
status_issue: 'https://github.com/github/design-systems/issues/72'
source: 'https://github.com/primer/css/tree/main/src/utilities/borders.scss'
bundle: utilities
---

Utilities for borders, and border radius.

## Default border

The default border utility applies a solid, 1px border, with a default gray color.

```html live
<div class="border">
  .border
</div>
```

Borders can be applied to a specific edge or to the X and Y axes individually:

```html live
<div class="d-flex mb-3">
  <div class="border-left col-3">
    .border-left
  </div>
  <div class="border-top col-3">
    .border-top
  </div>
  <div class="border-bottom col-3">
    .border-bottom
  </div>
  <div class="border-right col-3">
    .border-right
  </div>
</div>
<div class="border-x">
  .border-x
</div>
<div class="border-y">
  .border-y
</div>
```

Remove borders from all sides or a single side with `.border-0`, `.border-top-0`, `.border-right-0`, `.border-bottom-0`, `.border-left-0`.

```html live
<div class="Box border-top-0">
  .border-top-0
</div>
```

## Border style

Use `border-dashed` to give an element a dashed border.

```html live
<div class="border border-dashed p-2">
  .border-dashed
</div>
```

## Rounded corners

Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 4px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.

```html live
<div class="border rounded-0 p-2 mb-2">
  .rounded-0
</div>
<div class="border rounded-1 p-2 mb-2">
  .rounded-1
</div>
<div class="border rounded-2 p-2 mb-2">
  .rounded-2
</div>
<div class="border rounded-3 p-2 mb-2">
  .rounded-3
</div>
<div class="border circle p-3" style="width: 100px; height: 100px;">
  .circle
</div>
```

You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:

```html live
<div class="border rounded-top-2 p-2 mb-2">
  .rounded-top-2
</div>
<div class="border rounded-right-2 p-2 mb-2">
  .rounded-right-2
</div>
<div class="border rounded-bottom-2 p-2 mb-2">
  .rounded-bottom-2
</div>
<div class="border rounded-left-2 p-2 mb-2">
  .rounded-left-2
</div>
```

## Responsive borders

You can adjust border widths on all sides or each side individually with responsive border utilities:

- `border-(sm|md|lg|xl)` adds borders on all sides at and above the breakpoint. The `border-(sm|md|lg|xl)` shorthand is also supported.
- `border-(sm|md|lg|xl)-0` removes borders from all sides at and above the breakpoint.
- `border-(sm|md|lg|xl)-(top|right|bottom|left)` adds a border on the given side at and above the breakpoint.
- `border-(sm|md|lg|xl)-(top|right|bottom|left)-0` the border from the given side at and above the breakpoint.

```html live
<div class="border-top border-sm-right border-md-bottom border-md-top-0">
  .border-top
  <span class="d-none d-sm-inline">.border-sm-right </span>
  <span class="d-none d-md-inline">.border-md-bottom </span>
  <span class="d-none d-lg-inline">.border-md-top-0 </span>
</div>
```

## Border colors

Border colors are documented on the [colors utilities page](../utilities/colors#border-colors).

<!-- TODO: Remove?
## Border color utilities

<PaletteTable
  values={borders}
  prefix="bg"
  columns={[
    {title: 'Class', Cell: PaletteCell.Border, Value: props => `.${props.aliases.border}`},
    'variable',
    'value'
  ]}
  style={{borderSpacing: '0 4px'}}
/>
-->