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: 
<div class="border-1 border-solid border-gray-light">
  <!-- Subtle section separator -->
</div>
Contrasted outlines — use a mid-weight gray for cards, inputs, and containers that need clear visual boundaries: 
<div class="border-2 border-solid border-gray rounded-lg">
  <!-- Card with visible edge -->
</div>
Accent borders — use your primary brand color to draw attention to a selected item, active state, or featured element: 
<div class="border-2 border-solid border-primary rounded-lg">
  <!-- Featured or selected card -->
</div>

​
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: 
<div class="border-2 border-solid border-gray rounded-lg">
  <!-- Card: 2px solid gray border with large rounded corners -->
</div>
Breaking down what each class contributes:
ClassRoleResult
border-2WidthSets a 2px border (fluid, scales to 2.5px)
border-solidStyleDraws a solid, unbroken line
border-grayColorApplies a neutral mid-gray stroke
rounded-lgRadiusRounds all four corners to 8px
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.