Answer»
You can quickly style an element's border and border-radius by using border utilities. These are great for images, buttons, or any other element. Example:
| border | Used to add a border. |
<span class="border border-dark">Border bootstrap</span> |
|---|
| border-*-0 | It represents no border. Variations – border-top-0 represents no border on top, in similar way bottom, right and left are possible. |
<span class="p-1 border border-primary border-0">Border bootstrap</span>
<span class="p-1 border border-primary border-right-0">Border bootstrap</span> |
|---|
| border-* | It allows you to add/remove borders on a side as well as change the colour of the borders.border-(light, dark primary, secondary, transparent, white, warning, success, info, danger, 0, top-0, right-0, left-0, bottom-0). |
<span class="border border-primary">Border bootstrap</span> |
|---|
| rounded | rounded refers to the rounded image border. |
<img class="rounded" src="/images/myimg.png"> |
|---|
| rounded-sm | rounded-sm refers to small rounded edges. |
<img class="rounded-sm" src="/images/myimg.png"> |
|---|
| rounded-lg | rounded-lg refers to large rounded edges. |
<img class="rounded-lg" src="/images/myimg.png"> |
|---|
| rounded-circle | rounded-circle refers to a rounded circular image. |
<img class="rounded-circle" src="/images/myimg.png"> |
|---|
| rounded-0 | rounded-0 refers tono rounding (sharp edges). |
<img class="rounded-0" src="/images/footer-bootstrap.png"> |
|---|
|
