Border Utilities for Width, Style, Radius, and Color
AtomicKit’s border system covers width, style, radius, and color in one unified set of utilities including directional and corner-specific controls.
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.
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:
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:
Class
Role
Result
border-2
Width
Sets a 2px border (fluid, scales to 2.5px)
border-solid
Style
Draws a solid, unbroken line
border-gray
Color
Applies a neutral mid-gray stroke
rounded-lg
Radius
Rounds 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.
