Photo: Adam Śmigielski
Border
Introduction
Use border and border radius utilities to add outlines, side borders, rounded corners, and theme-aware border colors.
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 (top and bottom)
.border-y
Border (left and right)
.border-x
Border color (above) emphasized for clarity.
HTML
<div class="border">...</div><div class="border-top">...</div><div class="border-right">...</div><div class="border-bottom">...</div><div class="border-left">...</div><div class="border-y">...</div><div class="border-x">...</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><div class="border-y--md">...</div><div class="border-x--md">...</div>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 Canvas
HTML
<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>Border color utilities do not have breakpoint modifiers. Directional border color utilities are available (Figure 3).
Border Block Start Color Primary
Border Right Color Secondary
Border Block End Color Dark
Border Left Color Canvas
HTML
<div class="border border-block-start-color-primary">...</div><div class="border border-right-color-secondary">...</div><div class="border border-block-end-color-dark">...</div><div class="border border-left-color-canvas">...</div>These examples may not be necessary often, but they are available if needed.
Border Radius Utilities
Add a border radius to any element with Natura11y’s border radius utilities. Use the numbered radius scale, pill and circle radius utilities, or directional radius utilities. Include a breakpoint modifier to apply a border radius at a specific breakpoint (Figure 4).
Border Radius Sizes
Border Radius (None)
.border-radius-0
Border Radius (Small)
.border-radius-1
Border Radius (Regular)
.border-radius-2
Border Radius (Large)
.border-radius-3
Border Radius (Pill)
.border-radius-pill
.border-radius-circle
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 Radius Directional (Corners)
Border radius (top-left corner)
.border-radius-top-left-2
Border radius (top-right corner)
.border-radius-top-right-2
Border radius (bottom-right corner)
.border-radius-bottom-right-2
Border radius (bottom-left corner)
.border-radius-bottom-left-2
Border color (above) emphasized for clarity.
HTML
<!-- Border Radius Sizes -->
<div class="border-radius-0">...</div><div class="border-radius-1">...</div><div class="border-radius-2">...</div><div class="border-radius-3">...</div><div class="border-radius-pill">...</div><div class="border-radius-circle">...</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>
