#Border Width

These are utility classes that specify the border width of elements.

border-width: 0px !important

border-width: 1px !important

border-width: 2px !important

border-width: 4px !important

border-width: 8px !important

Supported Pseudo-Variants

See more pseudo-variants.

#Examples

Below is a demo of all utility classes that set a border width. The syntax follows the form of u-border-[0|1|2|4|8].

<div class="u-border-0 ..."></div>
<div class="u-border-1 ..."></div>
<div class="u-border-2 ..."></div>
<div class="u-border-4 ..."></div>
<div class="u-border-8 ..."></div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$BORDER-WIDTH: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want u-border-2 to be applied to some element for lg and above, then I would use the lg:u-border-2 class.

<div class="lg:u-border-2">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting the border-width property. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        border: (
            width: (
                '12': 12px,
                '16': 16px
            )
        )
    )
) !default;

This would generate the following classes.

.u-border-12 {
    border-width: 12px !important;
}
.u-border-16 {
    border-width: 16px !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.