How to style borders
add/remove borders
| css class | description |
|---|---|
| border | Adds borders for all sides. |
| border-top | Adds a top border. |
| border-right | Adds a right border. |
| border-bottom | Adds a bottom border. |
| border-left | Adds a left border. |
| border-0 | Removes borders from all sides. |
| border-top-0 | Removes a top border. |
| border-right-0 | Removes a right border. |
| border-bottom-0 | Removes a bottom border. |
| border-left-0 | 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-left | Rounds left corners of borders. |
| rounded-right | 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. |