How to style borders
add/remove borders
| css class | description |
|---|---|
| border | Adds borders for all sides. |
| border-top | Adds a top border. |
| border-end (border-right in v4.x) |
Adds a right border. |
| border-bottom | Adds a bottom border. |
| border-start (border-left in v4.x) |
Adds a left border. |
| border-0 | Removes borders from all sides. |
| border-top-0 | Removes a top border. |
| border-end-0 (border-right-0 in v4.x) |
Removes a right border. |
| border-bottom-0 | Removes a bottom border. |
| border-start-0 (border-left-0 in v4.x) |
Removes a left border. |
border
border
border-top-0
border-top-0
border color
<div class="border border-primary">
<div class="border border-secondary">
<div class="border border-success">
<div class="border border-danger">
<div class="border border-warning">
<div class="border border-info">
<div class="border border-light">
<div class="border border-dark">
<div class="border border-white">
border radius
| css class | description |
|---|---|
| rounded | Rounds corners of borders. |
| rounded-top | Rounds top corners of borders. |
| rounded-bottom | Rounds bottom corners of borders. |
| rounded-start (rounded-left in v4.x) |
Rounds left corners of borders. |
| rounded-end
(rounded-right in v4.x) |
Rounds right corners of borders. |
| rounded-circle | Creates a round border. If element has non-square size, it will be shows as ellipse. |
| rounded-pill | |
| rounded-lg | Specifies a larger border radius. |
| rounded-sm | Specifies a smaller border radius. |