Borders
Quickly style the border and border-radius of an element like images, buttons, or any other element.
Additive
| Class name | Preview |
|---|---|
.border |
|
.border-top |
|
.border-bottom |
|
.border-start |
|
.border-end |
Subtractive
| Class name | Preview |
|---|---|
.border-0
|
|
.border-top-0
|
|
.border-bottom-0
|
|
.border-start-0
|
|
.border-end-0
|
Color
| Class name | Preview |
|---|---|
.border-primary.border-primary-subtle
|
|
.border-secondary.border-secondary-subtle
|
|
.border-success.border-success-subtle
|
|
.border-info.border-info-subtle
|
|
.border-white
|
| Class name | Preview |
|---|---|
.border-warning.border-warning-subtle
|
|
.border-danger.border-danger-subtle
|
|
.border-light.border-light-subtle
|
|
.border-dark.border-dark-subtle
|
|
.border-black
|
Width
| Class name | Preview |
|---|---|
.border-1 |
|
.border-2 |
|
.border-3 |
|
.border-4 |
|
.border-5 |
Opacity
| Class name | Preview |
|---|---|
.border-opacity-75 |
|
.border-opacity-50 |
|
.border-opacity-25 |
|
.border-opacity-10 |
Radius
| Class name | Preview |
|---|---|
.rounded |
|
.rounded-top |
|
.rounded-bottom |
|
.rounded-start |
|
.rounded-end |
|
.rounded-circle |
|
.rounded-pill |
Sizes
| Class name | Preview |
|---|---|
.rounded-0 |
|
.rounded-1 |
|
.rounded-2 |
|
.rounded-3 |
|
.rounded-4 |
|
.rounded-5 |
Border radius sample
| Class name | Preview |
|---|---|
.rounded-top-3 |
|
.rounded-start-2 |
|
.rounded-end-circle |
| Class name | Preview |
|---|---|
.rounded-end-2 |
|
.rounded-start-pill |
|
.rounded-5.rounded-top-3
|
