Borders
CSS classes to quickly style the border and border-radius of an element.
Border
| Class | Styles |
|---|---|
| border | border: 1px solid var(--md-border-color); |
| border-t | border-top: 1px solid var(--md-border-color); |
| border-b | border-bottom: 1px solid var(--md-border-color); |
| border-tb | border-top: 1px solid var(--md-border-color); border-bottom: 1px solid var(--md-border-color); |
| border-s | border-left: 1px solid var(--md-border-color); |
| border-e | border-right: 1px solid var(--md-border-color); |
| border-se | border-left: 1px solid var(--md-border-color); border-right: 1px solid var(--md-border-color); |
| border-0 | border: 0; |
| border-t-0 | border-top: 0; |
| border-b-0 | border-bottom: 0; |
| border-s-0 | border-left: 0; |
| border-e-0 | border-right: 0; |
| border-none | border: none; |
| border-thin | border: thin solid; |
Color
| Class | Styles |
|---|---|
| border-[color-name] | --md-border-color: [color-value]; |
See applying border colors for more details.
Radius
| Class | Styles |
|---|---|
| rounded | border-radius: var(--md-radius); |
| rounded-circle | border-radius: 50%; |
| rounded-pill | border-radius: var(--md-radius-pill); |
| rounded-0 | border-radius: 0; |
| rounded-t-0 | border-top-left-radius: 0; border-top-right-radius: 0; |
| rounded-b-0 | border-bottom-left-radius: 0; border-bottom-right-radius: 0; |
| rounded-s-0 | border-top-left-radius: 0; border-bottom-left-radius: 0; |
| rounded-e-0 | border-top-right-radius: 0; border-bottom-right-radius: 0; |