Border Width Scale: All Sides, Directional, and Axis

AtomicKit’s border width scale gives you eight steps from zero to 20px, each mapped to a CSS custom property that fluid-scales with your layout. You can apply a width to all four sides at once or target a single edge, a pair of parallel edges, or any directional combination your design requires.

Border Width Scale

Every border width class sets border-width on all four sides of the element. The values are fluid — they scale proportionally between the base and max sizes listed below.

Class	Value Range	CSS Property
`.border-0`	0	`border-width: 0`
`.border-1`	1px → 1.25px	`border-width: var(--border-1)`
`.border-2`	2px → 2.5px	`border-width: var(--border-2)`
`.border-4`	4px → 5px	`border-width: var(--border-4)`
`.border-8`	8px → 10px	`border-width: var(--border-8)`
`.border-10`	10px → 12.5px	`border-width: var(--border-10)`
`.border-15`	15px → 18.75px	`border-width: var(--border-15)`
`.border-20`	20px → 25px	`border-width: var(--border-20)`

Border widths use CSS custom properties (var(--border-*)) under the hood. This means you can override any value globally by redefining the variable in your theme’s custom CSS, without touching individual elements.

Directional Variants

When you need to target only one side or two parallel sides, use the directional and axis prefix variants. These follow the same numeric scale as the all-sides classes.

Single-Side Prefixes

Prefix	Side	Example Class
`border-t-*`	Top	`border-t-2`
`border-r-*`	Right	`border-r-4`
`border-b-*`	Bottom	`border-b-1`
`border-l-*`	Left	`border-l-8`

Axis Prefixes

Prefix	Sides	Example Class
`border-x-*`	Left + Right	`border-x-2`
`border-y-*`	Top + Bottom	`border-y-1`

Typical suffixes for all directional variants: 1, 2, 4, 8.

Code Examples

All sides — standard card or input border:

<div class="border-2 border-solid border-primary rounded-lg">
  <!-- Card with a 2px primary-colored border on all sides -->
</div>

Left side only — accent bar or vertical divider:

<div class="border-l-4 border-solid border-primary">
  <!-- Blockquote-style left accent bar -->
</div>

Horizontal axis — left and right edges only:

<div class="border-x-2 border-solid border-gray">
  <!-- Element with borders only on left and right edges -->
</div>

Bottom border only — underline-style section heading:

<div class="border-b-1 border-solid border-gray-light">
  <!-- Heading with a light underline separator -->
</div>

Best Practices

Use border-1 and border-2 for most UI surfaces — cards, inputs, and containers rarely need anything heavier.
Reserve border-4 and above for decorative accent treatments, progress indicators, or bold graphic elements.
Always pair a width class with border-solid (or another style class) and a color class. Width alone produces no visible result.
Use directional variants (border-l-*, border-b-*) when you only want a single edge visible — for example, a left accent bar on a callout or a bottom divider under a section heading.
Use border-0 to explicitly remove a border that might be inherited or set by Elementor’s default widget styles.

Border Style — Define whether borders are solid, dashed, or removed.
Border Radius — Round the corners of bordered elements.
Border Colors — Apply color tokens to complete the border definition.