Skip to main content
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.
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

​
Axis Prefixes

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

​
Code Examples

All sides — standard card or input border:
Left side only — accent bar or vertical divider:
Horizontal axis — left and right edges only:
Bottom border only — underline-style section heading:

​
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.

​
Related Utilities

  • 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.