Gecko [ theprintave.ca ]

Name	Size	Permission	Date
borders.md	2.41 KB	-rw-r--r--	2021-01-19 16:16
clearfix.md	916 B	-rw-r--r--	2021-01-19 16:16
close-icon.md	365 B	-rw-r--r--	2021-01-19 16:16
colors.md	2.68 KB	-rw-r--r--	2021-01-19 16:16
display.md	3.88 KB	-rw-r--r--	2021-01-19 16:16
embed.md	1.87 KB	-rw-r--r--	2021-01-19 16:16
flex.md.gz	2.79 KB	-rw-r--r--	2021-01-19 16:16
float.md	1.67 KB	-rw-r--r--	2021-01-19 16:16
image-replacement.md	968 B	-rw-r--r--	2021-01-19 16:16
interactions.md	814 B	-rw-r--r--	2021-01-19 16:16
overflow.md	1006 B	-rw-r--r--	2021-01-19 16:16
position.md	1.38 KB	-rw-r--r--	2021-01-19 16:16
screen-readers.md	596 B	-rw-r--r--	2021-01-19 16:16
shadows.md	740 B	-rw-r--r--	2021-01-19 16:16
sizing.md	2.13 KB	-rw-r--r--	2021-01-19 16:16
spacing.md	3.95 KB	-rw-r--r--	2021-01-19 16:16
stretched-link.md.gz	1.46 KB	-rw-r--r--	2021-01-19 16:16
text.md.gz	1.5 KB	-rw-r--r--	2021-01-19 16:16
vertical-align.md	1.25 KB	-rw-r--r--	2021-01-19 16:16
visibility.md	914 B	-rw-r--r--	2021-01-19 16:16

Rename

---
layout: docs
title: Borders
description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
group: utilities
aliases: "/docs/4.6/utilities/"
toc: true
---

## Border

Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.

### Additive

{{< example class="bd-example-border-utils">}}





{{< /example >}}

### Subtractive

{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}





{{< /example >}}

## Border color

Change the border color using utilities built on our theme colors.

{{< example class="bd-example-border-utils" >}}
{{< border.inline >}}
{{- range (index $.Site.Data "theme-colors") }}

{{- end -}}
{{< /border.inline >}}

{{< /example >}}

## Border-radius

Add classes to an element to easily round its corners.

{{< example>}}
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
{{< /example >}}

## Sizes

Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.

{{< example >}}
{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
{{< /example >}}