mirror of
https://github.com/primer/css.git
synced 2024-11-30 01:04:04 +03:00
125 lines
3.2 KiB
Plaintext
125 lines
3.2 KiB
Plaintext
---
|
|
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, and `rounded-3` applies a border radius of 8px. `.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).
|