Skip to main content
AtomicKit provides three border style utilities that control how a border line is rendered. Style is the activation switch in the border system — a width and color are invisible until a style is applied. Choosing the right style signals the nature of a boundary: solid for permanent structure, dashed for optional or editable regions, and none to suppress a border entirely.

​
Border Style Classes

ClassCSS PropertyUse When
.border-solidborder-style: solidStandard UI surfaces — cards, inputs, containers, buttons
.border-dashedborder-style: dashedOptional zones — upload areas, droppable regions, placeholder slots
.border-noneborder-style: noneRemoving a border applied by Elementor defaults or a parent class

​
Code Examples

Solid card border — the default pattern for most bordered surfaces: 
<div class="border-2 border-solid border-gray rounded-lg">
  <!-- Standard card with a solid 2px gray outline and rounded corners -->
</div>
Dashed upload zone — communicates an interactive or optional boundary: 
<div class="border-2 border-dashed border-gray-light rounded">
  <!-- File upload dropzone or placeholder area -->
</div>
Removing an inherited border — strip borders set by Elementor widget defaults: 
<div class="border-0 border-none">
  <!-- Explicitly resets both the border width and style to nothing -->
</div>
When removing a border, apply both border-0 and border-none together. border-0 sets the width to zero; border-none sets the style to none. Using both ensures the border is fully suppressed regardless of which property was originally set.

​
Best Practices

  • Always pair style with width and color. A border-solid class on its own produces no visible result. Every bordered element needs all three: a width (border-2), a style (border-solid), and a color (border-gray).
  • Use border-solid as your default. It works for the vast majority of UI surfaces — cards, form inputs, section wrappers, and interactive components.
  • Reserve border-dashed for intentional semantic use. Dashed borders signal to users that something is optional, editable, or a placeholder. Avoid using dashed borders for decorative purposes where a solid border would do.
  • Use border-none to override. When an Elementor widget or parent container applies a border you don’t want, border-none (combined with border-0) gives you a clean override without needing custom CSS.

​
Related Utilities

  • Border Width — Set the thickness of your border before applying a style.
  • Border Radius — Round the corners of your styled element.