Skip Navigation

Photo by Adam Śmigielski  on Unsplash

Borders

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

Border Utilities

Add a border to any element with Natura11y's border utilities. Include a breakpoint modifier to apply a border at a specific breakpoint (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

<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 Light

Border Color Dark

<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-white">...</div>
<div class="border border-top-color-secondary border-bottom-color-secondary">...</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 Color Dark

Border Color Dark

<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-white">...</div>
<div class="border border-top-color-secondary border-bottom-color-secondary">...</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 3).

Border Radius (all sides)

.border-radius

Border Radius (top side only)

.border-radius-top

Border Radius (right side only)

.border-radius-right

Border Radius (bottom side only)

.border-radius-bottom

Border Radius (left side only)

.border-radius-left

<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

Related CSS Variables

Further customize Borders by redefining any of their related CSS variables as shown below.

:root {
    --default-border-width: 1px;
    --default-border-style: solid;
    --border-radius: 0.5em;
}