Border Helper Classes

TIP

The following colors are available for border helper classes:

$color-map-border: (
        "primary": $primary-color,
        "primary-lightest": $primary-color-lightest,
        "secondary": $secondary-color,
        "secondary-light": $secondary-color-light,
        "white": $white,
        "notice": $notice-color,
        "error": $error-color,
        "warning": $warning-color,
        "success": $success-color,
        "disabled": $disabled-color,
        "gray": $gray,
        "light-gray": $light-gray
);

Surrounding Borders

.h-border-{$colorName}

h-border-primary

h-border-primary-light

h-border-primary-lightest

h-border-secondary

h-border-gray

h-border-light-gray

h-border-success

h-border-warning

h-border-error

hide code

<div class="m-t-m h-flex h-space-between">
    <div class="p-m h-bg-color h-border-primary m-x-xxs">h-border-primary</div>
    <div class="p-m h-bg-color h-border-primary-light m-x-xxs">h-border-primary-light</div>
    <div class="p-m h-bg-color h-border-primary-lightest m-x-xxs">h-border-primary-lightest</div>
    <div class="p-m h-bg-color h-border-secondary m-x-xxs">h-border-secondary</div>
    <div class="p-m h-bg-color h-border-gray m-x-xxs">h-border-gray</div>
    <div class="p-m h-bg-color h-border-light-gray m-x-xxs">h-border-light-gray</div>
    <div class="p-m h-bg-color h-border-success m-x-xxs">h-border-success</div>
    <div class="p-m h-bg-color h-border-warning m-x-xxs">h-border-warning</div>
    <div class="p-m h-bg-color h-border-error m-x-xxs">h-border-error</div>
</div>

Bold Borders

.h-border-{$colorName}-[extra]-[bold]

h-border-primary-bold

h-border-primary-lightest-bold

h-border-secondary-extra-bold

h-border-gray-bold

h-border-light-gray-bold

h-border-success-bold

h-border-warning-bold

h-border-error-bold

hide code

<div class="m-t-m h-flex h-space-between">
    <div class="p-m h-bg-color h-border-primary-bold m-x-xxs">h-border-primary-bold</div>
    <div class="p-m h-bg-color h-border-primary-lightest-bold m-x-xxs">h-border-primary-lightest-bold</div>
    <div class="p-m h-bg-color h-border-secondary-bold m-x-xxs">h-border-secondary-extra-bold</div>
    <div class="p-m h-bg-color h-border-gray-bold m-x-xxs">h-border-gray-bold</div>
    <div class="p-m h-bg-color h-border-light-gray-bold m-x-xxs">h-border-light-gray-bold</div>
    <div class="p-m h-bg-color h-border-success-bold m-x-xxs">h-border-success-bold</div>
    <div class="p-m h-bg-color h-border-warning-bold m-x-xxs">h-border-warning-bold</div>
    <div class="p-m h-bg-color h-border-error-bold m-x-xxs">h-border-error-bold</div>
</div>

Border on one side

.h-border-[left, right, top, bottom]-{$colorName}

h-border-left-primary

h-border-bottom-primary-lightest

h-border-right-secondary

h-border-right-light-gray

h-border-bottom-error

h-border-top-success

h-border-top-warning

hide code

<div class="m-t-m h-flex h-space-between">
    <div class="p-m h-bg-color h-border-left-primary m-x-xxs">h-border-left-primary</div>
    <div class="p-m h-bg-color h-border-bottom-primary-lightest m-x-xxs">h-border-bottom-primary-lightest</div>
    <div class="p-m h-bg-color h-border-right-secondary m-x-xxs">h-border-right-secondary</div>
    <div class="p-m h-bg-color h-border-right-light-gray m-x-xxs">h-border-right-light-gray</div>
    <div class="p-m h-bg-color h-border-bottom-error m-x-xxs">h-border-bottom-error</div>
    <div class="p-m h-bg-color h-border-top-success m-x-xxs">h-border-top-success</div>
    <div class="p-m h-bg-color h-border-top-warning m-x-xxs">h-border-top-warning</div>
</div>

Border Radius

.h-border-radius, .h-border-radius-large, .h-border-radius-button, .h-border-radius-button-large

h-border-radius

h-border-radius-large

h-border-radius-button

h-border-radius-button-large

hide code

<div class="h-flex h-center h-space-between">
    <div class="p-m h-bg-color-black h-box-shadow h-float-left h-border-radius m-r-m">h-border-radius</div>
    <div class="p-m h-bg-color-primary h-color-white h-float-right h-border-radius-large">h-border-radius-large</div>
    <div class="p-m h-bg-color-black h-color-white h-float-right h-border-radius-button">h-border-radius-button</div>    
    <div class="p-m h-bg-color-primary h-color-white h-float-right h-border-radius-button-large">h-border-radius-button-large</div>
</div>

Reset Borders

.h-no-border[-y, -x, -top, -bottom, -left, -right]

Reset Border Radius

.h-border-radius-reset[-top/-bottom]

Circle

.h-border-radius-100

hide code

<button class="c-btn h-border-radius-100">
1
</button>

Border Helper Classes for Print

See general Print Helper Classes.