Skip to main content
AtomicKit’s border utilities give you precise control over every edge of an element — from hairline dividers to thick accent bars, sharp corners to fully rounded pills. All four dimensions of the border system (width, style, radius, and color) are designed to be combined into a single, readable class string that maps directly to CSS.

Border Width

Set border thickness on all sides or target individual edges and axes with directional variants like border-t-*, border-x-*, and more.

Border Style

Choose how border lines are drawn — border-solid for crisp outlines, border-dashed for optional framing, or border-none to remove a border entirely.

Border Radius

Round corners uniformly or target specific sides and individual corners using rounded-* utilities, from rounded-sm to rounded-full.

Border Colors

Pair any border with a color utility. Use semantic tokens like border-primary for brand accents, or neutral tones like border-gray and border-gray-light.

​
Common Patterns

When combining border utilities, you’ll reach for a small set of recurring combinations depending on the surface you’re styling. Soft dividers — use a light neutral color to separate content without visual weight:
Contrasted outlines — use a mid-weight gray for cards, inputs, and containers that need clear visual boundaries:
Accent borders — use your primary brand color to draw attention to a selected item, active state, or featured element:

​
Complete Border Shorthand

A fully-formed border always combines width, style, radius, and color. This is the recommended pattern for any bordered surface in Elementor:
Breaking down what each class contributes:
Always apply a border style class alongside a border width class. Without border-solid (or another style), the browser renders no visible line even when a width and color are set.

​
Related Utilities

  • Spacing — Use padding utilities to control the distance between a border and inner content.
  • Colors — Explore the full color token set available for border coloring.