Border • Natura11y

There is a newer version of Naturally.

Aerial view of green trees and plants



Maintain the border and border radius styles globally and on specific selectors.

Border Utilities

Add a border to all sides or a specific side of an element with Natura11y's border utilities (Figure 1).

Border (all sides)


Border (top side only)


Border (right side only)


Border (bottom side only)


Border (left side only)


Border color (above) emphasized for clarity.

        <div class="border">...</div>
        <div class="border-top">...</div>
        <div class="border-right">...</div>
        <div class="border-bottom">...</div>
        <div class="border-left">...</div>
        <!-- Breakpoint Specific (e.g., medium breakpoint) -->
        <div class="border--md">...</div>
        <div class="border-top--md">...</div>
        <div class="border-right--md">...</div>
        <div class="border-bottom--md">...</div>
        <div class="border-left--md">...</div>
Figure 1

Border Color Utilities

Specify a border color to a bordered element with the border color utilities (Figure 2). Theme colors generate these available colors.

Border Color Primary

Border Color Secondary

Border Color dark

Border Color Canvas

        <div class="border border-color-primary">...</div>
        <div class="border border-color-secondary">...</div>
        <div class="border border-color-dark">...</div>
        <div class="border border-color-light">...</div>
        <div class="border border-color-canvas">...</div>
Figure 2

Border color utilities do not have breakpoint modifiers. Directional border color utilities are available (Figure 3).

Border Top Color Primary

Border Right Color Secondary

Border Bottom Color Dark

Border Left Color Canvas

        <div class="border border-top-color-primary">...</div>
        <div class="border border-right-color-secondary">...</div>
        <div class="border border-bottom-color-dark">...</div>
        <div class="border border-left-color-light">...</div>
Figure 3

Of course the above examples will rarely be necassary, but they are available nonetheless.

Border Radius Utilities

Add a border radius to any element with Natura11y's border utilities. Include a breakpoint modifier to apply a border-radius at a specific breakpoint (Figure 4).

Border Radius (all sides)


Border Radius (top side only)


Border Radius (right side only)


Border Radius (bottom side only)


Border Radius (left side only)


Border color (above) emphasized for clarity.

        <div class="border-radius">...</div>
        <div class="border-radius-top">...</div>
        <div class="border-radius-right">...</div>
        <div class="border-radius-bottom">...</div>
        <div class="border-radius-left">...</div>
        <!-- Breakpoint Specific (e.g., medium breakpoint) -->
        <div class="border-radius--md">...</div>
Figure 4