Skip to content

Latest commit

 

History

History
281 lines (210 loc) · 10.9 KB

borders.md

File metadata and controls

281 lines (210 loc) · 10.9 KB
layout title description group aliases toc
docs
Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
utilities
/docs/utilities/borders/
true

Border

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

Additive

Add borders to custom elements:

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

Subtractive

Or remove borders:

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

Color

{{< callout info >}} Border utilities like .border-* that generated from our original $theme-colors Sass map don't yet respond to color modes, however, any .border-*-subtle utility will. This will be resolved in v6. {{< /callout >}}

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

{{< callout info >}} For each .border-* there is a matching .border-*-subtle utility. In Boosted, they have exactly the same value so we decided not to display them in the example above so that you don't hesitate on which class to use.

Here is a list of these extra classes: {{< border-subtle.inline >}} {{- range (index $.Site.Data "theme-colors") }}

  • .border-{{ .name }}-subtle {{- end -}} {{< /border-subtle.inline >}} {{< /callout >}}

Or modify the default border-color of a component:

See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These border color variants are just **examples illustrating the use of this color utility**. They should not be used because they do not respect the Orange Design System specifications. {{< /design-callout-alert >}}

{{< example >}}

Email address
Dangerous heading
Changing border color and width
{{< /example >}}

Opacity

{{< added-in "5.2.0" >}}

Boosted border-{color} utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our default .border-success utility.

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

We use an RGB version of our --bs-success (with the value of 25, 135, 84) CSS variable and attached a second CSS variable, --bs-border-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). That means anytime you use .border-success now, your computed color value is rgba(25, 135, 84, 1). The local CSS variable inside each .border-* class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.

Example

To change that opacity, override --bs-border-opacity via custom styles or inline styles.

{{< example >}}

This is default success border
{{< /example >}}
See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These border color variants **with opacity** should not be used because they do not respect the Orange Design System specifications. {{< /design-callout-alert >}}

{{< example >}}

This is default success border
This is 50% opacity success border
{{< /example >}}

Or, choose from any of the .border-opacity utilities:

{{< example >}}

This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border
{{< /example >}}

Width

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

See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} The three last border utilities with **a width larger than 2px** should not be used because they do not respect the Orange Design System specifications. {{< /design-callout-alert >}}

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

Radius

Add classes to an element to easily round its corners.

{{< example >}} {{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}} {{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}} {{< /example >}}

See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These border variants with **a radius CSS class different than `.rounded-circle` and `.rounded-pill`** should not be used because they do not respect the Orange Design System specifications. {{< /design-callout-alert >}}

{{< example >}} {{< placeholder width="75" height="75" class="rounded" title="Example rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}} {{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}} {{< /example >}}

Sizes

{{< added-in "5.3.0" >}}

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5, and can be configured by modifying the utilities API.

{{< example class="bd-example-rounded-utils" >}} {{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" color="#999" >}} {{< /example >}}

See Bootstrap examples that are incompatible with Orange Design System.
{{< design-callout-alert >}} These border variants with **a size CSS class different than `.rounded-0`** should not be used because they do not respect the Orange Design System specifications. {{< /design-callout-alert >}}

{{< example class="bd-example-rounded-utils" >}} {{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" color="#999" >}} {{< /example >}}

{{< example class="bd-example-rounded-utils" >}} {{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" color="#999" >}} {{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" color="#999" >}} {{< /example >}}

Dividers

{{< example >}}

{{< /example >}}

CSS

Variables

{{< added-in "5.2.0" >}}

{{< scss-docs name="root-border-var" file="scss/_root.scss" >}}

Sass variables

{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}

Variables for setting border-color in .border-*-subtle utilities in light and dark mode:

{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}}

Sass maps

Color mode adaptive border colors are also available as a Sass map:

{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}}

{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}}

Sass mixins

{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}

Sass utilities API

Border utilities are declared in our utilities API in scss/_utilities.scss. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}}

{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}}