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
Code Examples
Solid card border — the default pattern for most bordered surfaces:
Dashed upload zone — communicates an interactive or optional boundary:
Removing an inherited border — strip borders set by Elementor widget defaults:
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.
