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. |