| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Borders | |
| 4 | description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. | |
| 5 | group: utilities | |
| 6 | redirect_from: "/docs/4.2/utilities/" | |
| 7 | toc: true | |
| 8 | --- | |
| 9 | ||
| 10 | ## Border | |
| 11 | ||
| 12 | Use border utilities to add or remove an element's borders. Choose from all borders or one at a time. | |
| 13 | ||
| 14 | ### Additive | |
| 15 | ||
| 16 | <div class="bd-example-border-utils"> | |
| 17 | {% capture example %} | |
| 18 | <span class="border"></span> | |
| 19 | <span class="border-top"></span> | |
| 20 | <span class="border-right"></span> | |
| 21 | <span class="border-bottom"></span> | |
| 22 | <span class="border-left"></span> | |
| 23 | {% endcapture %} | |
| 24 | {% include example.html content=example %} | |
| 25 | </div> | |
| 26 | ||
| 27 | ### Subtractive | |
| 28 | ||
| 29 | <div class="bd-example-border-utils bd-example-border-utils-0"> | |
| 30 | {% capture example %} | |
| 31 | <span class="border-0"></span> | |
| 32 | <span class="border-top-0"></span> | |
| 33 | <span class="border-right-0"></span> | |
| 34 | <span class="border-bottom-0"></span> | |
| 35 | <span class="border-left-0"></span> | |
| 36 | {% endcapture %} | |
| 37 | {% include example.html content=example %} | |
| 38 | </div> | |
| 39 | ||
| 40 | ## Border color | |
| 41 | ||
| 42 | Change the border color using utilities built on our theme colors. | |
| 43 | ||
| 44 | <div class="bd-example-border-utils"> | |
| 45 | {% capture example %} | |
| 46 | {% for color in site.data.theme-colors %} | |
| 47 | <span class="border border-{{ color.name }}"></span>{% endfor %} | |
| 48 | <span class="border border-white"></span> | |
| 49 | {% endcapture %} | |
| 50 | {% include example.html content=example %} | |
| 51 | </div> | |
| 52 | ||
| 53 | ## Border-radius | |
| 54 | ||
| 55 | Add classes to an element to easily round its corners. | |
| 56 | ||
| 57 | <div class="bd-example bd-example-images"> | |
| 58 | {%- include icons/placeholder.svg width="75" height="75" class="rounded" title="Example rounded image" -%} | |
| 59 | {%- include icons/placeholder.svg width="75" height="75" class="rounded-top" title="Example top rounded image" -%} | |
| 60 | {%- include icons/placeholder.svg width="75" height="75" class="rounded-right" title="Example right rounded image" -%} | |
| 61 | {%- include icons/placeholder.svg width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" -%} | |
| 62 | {%- include icons/placeholder.svg width="75" height="75" class="rounded-left" title="Example left rounded image" -%} | |
| 63 | {%- include icons/placeholder.svg width="75" height="75" class="rounded-circle" title="Completely round image" -%} | |
| 64 | {%- include icons/placeholder.svg width="150" height="75" class="rounded-pill" title="Rounded pill image" -%} | |
| 65 | {%- include icons/placeholder.svg width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" -%} | |
| 66 | </div> | |
| 67 | ||
| 68 | {% highlight html %} | |
| 69 | <img src="..." alt="..." class="rounded"> | |
| 70 | <img src="..." alt="..." class="rounded-top"> | |
| 71 | <img src="..." alt="..." class="rounded-right"> | |
| 72 | <img src="..." alt="..." class="rounded-bottom"> | |
| 73 | <img src="..." alt="..." class="rounded-left"> | |
| 74 | <img src="..." alt="..." class="rounded-circle"> | |
| 75 | <img src="..." alt="..." class="rounded-pill"> | |
| 76 | <img src="..." alt="..." class="rounded-0"> | |
| 77 | {% endhighlight %} | |
