| 1 |
efrain |
1 |
---
|
|
|
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 |
aliases: "/docs/4.6/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 |
{{< example class="bd-example-border-utils">}}
|
|
|
17 |
<span class="border"></span>
|
|
|
18 |
<span class="border-top"></span>
|
|
|
19 |
<span class="border-right"></span>
|
|
|
20 |
<span class="border-bottom"></span>
|
|
|
21 |
<span class="border-left"></span>
|
|
|
22 |
{{< /example >}}
|
|
|
23 |
|
|
|
24 |
### Subtractive
|
|
|
25 |
|
|
|
26 |
{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
|
|
|
27 |
<span class="border-0"></span>
|
|
|
28 |
<span class="border-top-0"></span>
|
|
|
29 |
<span class="border-right-0"></span>
|
|
|
30 |
<span class="border-bottom-0"></span>
|
|
|
31 |
<span class="border-left-0"></span>
|
|
|
32 |
{{< /example >}}
|
|
|
33 |
|
|
|
34 |
## Border color
|
|
|
35 |
|
|
|
36 |
Change the border color using utilities built on our theme colors.
|
|
|
37 |
|
|
|
38 |
{{< example class="bd-example-border-utils" >}}
|
|
|
39 |
{{< border.inline >}}
|
|
|
40 |
{{- range (index $.Site.Data "theme-colors") }}
|
|
|
41 |
<span class="border border-{{ .name }}"></span>
|
|
|
42 |
{{- end -}}
|
|
|
43 |
{{< /border.inline >}}
|
|
|
44 |
<span class="border border-white"></span>
|
|
|
45 |
{{< /example >}}
|
|
|
46 |
|
|
|
47 |
## Border-radius
|
|
|
48 |
|
|
|
49 |
Add classes to an element to easily round its corners.
|
|
|
50 |
|
|
|
51 |
{{< example>}}
|
|
|
52 |
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
|
|
|
53 |
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
|
|
|
54 |
{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
|
|
|
55 |
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
|
|
|
56 |
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
|
|
|
57 |
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
|
|
|
58 |
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
|
|
|
59 |
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
|
|
|
60 |
{{< /example >}}
|
|
|
61 |
|
|
|
62 |
## Sizes
|
|
|
63 |
|
|
|
64 |
Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
|
|
|
65 |
|
|
|
66 |
{{< example >}}
|
|
|
67 |
{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
|
|
|
68 |
{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
|
|
|
69 |
{{< /example >}}
|