Border color
| Standard | On hover | Render |
|---|---|---|
.b-body |
.b-body-hover |
|
.b-card |
.b-card-hover |
|
.b-default |
.b-default-hover |
|
.b-primary |
.b-primary-hover |
|
.b-secondary |
.b-secondary-hover |
|
.b-success |
.b-success-hover |
|
.b-info |
.b-info-hover |
|
.b-warning |
.b-warning-hover |
|
.b-danger |
.b-danger-hover |
|
.b-dark |
.b-dark-hover |
|
.b-light |
.b-light-hover |
|
.b-black |
.b-black-hover |
Border opacity
| Shortcuts | Primary color | Secondary color | Success color | Info color | Warning color | Danger color | Dark color |
|---|---|---|---|---|---|---|---|
.b-10 |
|||||||
.b-20 |
|||||||
.b-30 |
|||||||
.b-40 |
|||||||
.b-50 |
|||||||
.b-60 |
|||||||
.b-70 |
|||||||
.b-80 |
|||||||
.b-90 |
Border width
| Property | Shortcuts | ||||||
|---|---|---|---|---|---|---|---|
border-width |
.b-0 |
.b-1 |
.b-2 |
.b-3 |
.b-4 |
.b-5 |
|
border-top-width |
.bt-0 |
.bt-1 |
.bt-2 |
.bt-3 |
.bt-4 |
.bt-5 |
|
border-bottom-width |
.bb-0 |
.bb-1 |
.bb-2 |
.bb-3 |
.bb-4 |
.bb-5 |
|
border-left-width |
.bs-0 |
.bs-1 |
.bs-2 |
.bs-3 |
.bs-4 |
.bs-5 |
|
border-right-width |
.be-0 |
.be-1 |
.be-2 |
.be-3 |
.be-4 |
.be-5 |
|
Border style
| Shortcuts | Values | Render |
|---|---|---|
.b-none |
none |
|
.b-solid |
solid |
|
.b-dashed |
dashed |
|
.b-dotted |
dotted |
|
.b-double |
double |
Border radius
| Shortcuts | Values | Render |
|---|---|---|
.rounded-0 |
0 rem |
|
.rounded-1 |
0.25 rem |
|
.rounded-2 |
0.50 rem |
|
.rounded-3 |
0.75 rem |
|
.rounded-4 |
50 % |
Individual border radius
| Property | Shortcuts | ||||
|---|---|---|---|---|---|
border-top-left-radius |
.rounded-ts-0 |
.rounded-ts-1 |
.rounded-ts-2 |
.rounded-ts-3 |
.rounded-ts-4 |
border-top-right-radius |
.rounded-te-0 |
.rounded-te-1 |
.rounded-te-2 |
.rounded-te-3 |
.rounded-te-4 |
border-bottom-left-radius |
.rounded-bs-0 |
.rounded-bs-1 |
.rounded-bs-2 |
.rounded-bs-3 |
.rounded-bs-4 |
border-bottom-right-radius |
.rounded-be-0 |
.rounded-be-1 |
.rounded-be-2 |
.rounded-be-3 |
.rounded-be-4 |