Border • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

Aerial view of green trees and plants

Photo by Adam Śmigielski

Border

Introduction

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

Border (top side only)

.border-top

Border (right side only)

.border-right

Border (bottom side only)

.border-bottom

Border (left side only)

.border-left

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 radius utilities. Border radius utilities are available in three sizes. Include a breakpoint modifier to apply a border-radius at a specific breakpoint (Figure 4).

Border Radius Sizes

Border Radius (Small)

.border-radius-1

Border Radius (Regular)

.border-radius-2

Border Radius (Large)

.border-radius-3

Border Radius Directional (Sides)

Border (top side only)

.border-radius-top-2

Border (right side only)

.border-radius-right-2

Border (bottom side only)

.border-radius-bottom-2

Border (left side only)

.border-radius-left-2

Border color (above) emphasized for clarity.


        <!-- Border Radius Sizes -->

        <div class="border-radius-1">...</div>
        <div class="border-radius-2">...</div>
        <div class="border-radius-3">...</div>

        <!-- Border Radius Directional (Sides) -->
        
        <div class="border-radius-top-1">...</div>
        <div class="border-radius-top-2">...</div>
        <div class="border-radius-top-3">...</div>

        <div class="border-radius-right-1">...</div>
        <div class="border-radius-right-2">...</div>
        <div class="border-radius-right-3">...</div>

        <div class="border-radius-bottom-1">...</div>
        <div class="border-radius-bottom-2">...</div>
        <div class="border-radius-bottom-3">...</div>

        <div class="border-radius-left-1">...</div>
        <div class="border-radius-left-2">...</div>
        <div class="border-radius-left-3">...</div>

        <!-- Border Radius Directional (Corners) -->

        <div class="border-radius-top-left-1">...</div>
        <div class="border-radius-top-left-2">...</div>
        <div class="border-radius-top-left-3">...</div>

        <div class="border-radius-top-right-1">...</div>
        <div class="border-radius-top-right-2">...</div>
        <div class="border-radius-top-right-3">...</div>

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