Tóm Tắt
Border
Border ‘base’ utility classes:
CSS Class
Description
b
{p}
order
add a 1px, solid, color-contrast-higher border with 10% opacity
b
{p}
order-top
add a 1px, solid, color-contrast-higher border top with 10% opacity
b
{p}
order-bottom
add a 1px, solid, color-contrast-higher border bottom with 10% opacity
b
{p}
order-left
add a 1px, solid, color-contrast-higher border left with 10% opacity
b
{p}
order-right
add a 1px, solid, color-contrast-higher border right with 10% opacity
If you don’t specify any border width, style, and color, the border ‘base’ classes apply a 1px solid border using var(--color-contrast-higher) as color, with a 10% opacity.
Border Width #
Modify the border width using one of the following classes:
CSS Class
Description
b
{p}
order-2
border-width: 2px;
b
{p}
order-3
border-width: 3px;
b
{p}
order-4
border-width: 4px;
Example:
<div class="border-top border-3"></div>Border Style #
Modify the border style using one of the following classes:
CSS Class
Description
b
{p}
order-dotted
border-style: dotted;
b
{p}
order-dashed
border-style: dashed;
Example:
<div class="border-bottom border-2 border-dashed"></div>Border Color #
Modify the border color using one of the following classes.
Border Color Contrasts #
CSS Class
Description
b
{p}
order-contrast-lower
border-color: var(–color-contrast-lower);
b
{p}
order-contrast-low
border-color: var(–color-contrast-low);
b
{p}
order-contrast-medium
border-color: var(–color-contrast-medium);
b
{p}
order-contrast-high
border-color: var(–color-contrast-high);
b
{p}
order-contrast-higher
border-color: var(–color-contrast-higher);
Border Primary #
CSS Class
Description
b
{p}
order-primary-darker
border-color: var(–color-primary-darker);
b
{p}
order-primary-dark
border-color: var(–color-primary-dark);
b
{p}
order-primary
border-color: var(–color-primary);
b
{p}
order-primary-light
border-color: var(–color-primary-light);
b
{p}
order-primary-lighter
border-color: var(–color-primary-lighter);
Border Accent #
CSS Class
Description
b
{p}
order-accent-darker
border-color: var(–color-accent-darker);
b
{p}
order-accent-dark
border-color: var(–color-accent-dark);
b
{p}
order-accent
border-color: var(–color-accent);
b
{p}
order-accent-light
border-color: var(–color-accent-light);
b
{p}
order-accent-lighter
border-color: var(–color-accent-lighter);
Border Feedback Colors #
CSS Class
Description
b
{p}
order-success-darker
border-color: var(–color-success-darker);
b
{p}
order-success-dark
border-color: var(–color-success-dark);
b
{p}
order-success
border-color: var(–color-success);
b
{p}
order-success-light
border-color: var(–color-success-light);
b
{p}
order-success-lighter
border-color: var(–color-success-lighter);
b
{p}
order-warning-darker
border-color: var(–color-warning-darker);
b
{p}
order-warning-dark
border-color: var(–color-warning-dark);
b
{p}
order-warning
border-color: var(–color-warning);
b
{p}
order-warning-light
border-color: var(–color-warning-light);
b
{p}
order-warning-lighter
border-color: var(–color-warning-lighter);
b
{p}
order-error-darker
border-color: var(–color-error-darker);
b
{p}
order-error-dark
border-color: var(–color-error-dark);
b
{p}
order-error
border-color: var(–color-error);
b
{p}
order-error-light
border-color: var(–color-error-light);
b
{p}
order-error-lighter
border-color: var(–color-error-lighter);
Border Black & White #
CSS Class
Description
b
{p}
order-white
border-color: var(–color-white);
b
{p}
order-black
border-color: var(–color-black);
Border Background Color #
CSS Class
Description
b
{p}
order-bg-darker
border-color: var(–color-bg-darker);
b
{p}
order-bg-dark
border-color: var(–color-bg-dark);
b
{p}
order-bg
border-color: var(–color-bg);
b
{p}
order-bg-light
border-color: var(–color-bg-light);
b
{p}
order-bg-lighter
border-color: var(–color-bg-lighter);
Border Opacity #
The base border classes apply a default var(--color-contrast-higher) border color with a 10% opacity. Optionally, you can edit the ‘base’ opacity color updating the --border-o-base custom property:
:root {
--border-o-base: 0.2; // set the base border opacity equal to 20%
}Alternatively, you can combine a border color class with one of the following border opacity classes:
CSS Class
Description
b
{p}
order-opacity-0
border opacity 0%
b
{p}
order-opacity-5%
border opacity 5%
b
{p}
order-opacity-10%
border opacity 10%
b
{p}
order-opacity-15%
border opacity 15%
b
{p}
order-opacity-20%
border opacity 20%
b
{p}
order-opacity-25%
border opacity 25%
b
{p}
order-opacity-30%
border opacity 30%
b
{p}
order-opacity-40%
border opacity 40%
b
{p}
order-opacity-50%
border opacity 50%
b
{p}
order-opacity-60%
border opacity 60%
b
{p}
order-opacity-70%
border opacity 70%
b
{p}
order-opacity-75%
border opacity 75%
b
{p}
order-opacity-80%
border opacity 80%
b
{p}
order-opacity-85%
border opacity 85%
b
{p}
order-opacity-90%
border opacity 90%
b
{p}
order-opacity-95%
border opacity 95%
Example:
<div class="border border-primary border-opacity-70%"> <!-- content --> </div> How to create custom border opacity classes:
.border-opacity-075\% {
--border-o: 0.075;
}Border Gradient #
If you create one or more gradients using the Color Editor, the generated code will include a collection of border-gradient utility classes.
For example, if you create a --gradient-primary color, you’ll get the following classes:
CSS Class
Description
b
{p}
order-gradient-primary
radial border gradient
b
{p}
order-gradient-primary-top
linear border gradient to top
b
{p}
order-gradient-primary-right
linear border gradient to right
b
{p}
order-gradient-primary-bottom
linear border gradient to bottom
b
{p}
order-gradient-primary-left
linear border gradient to left
Note
Because the border gradient classes use the ‘border-image’ property, you can’t apply a border radius.
<div class="border border-4 border-gradient-primary-right radius-md">
<!-- 👆 the radius-md utility class won't work -->
</div>