Border Style in AtomicKit: Solid, Dashed, and None

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

Class	CSS Property	Use When
`.border-solid`	`border-style: solid`	Standard UI surfaces — cards, inputs, containers, buttons
`.border-dashed`	`border-style: dashed`	Optional zones — upload areas, droppable regions, placeholder slots
`.border-none`	`border-style: none`	Removing 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.

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

Get Started

Colors & Typography

Spacing & Sizing

Layout & Flexbox

Borders & Effects

Plugin - Dashboard Overview

Design Tokens

Import & Export

Border Style in AtomicKit: Solid, Dashed, and None

Border Style Classes

Code Examples

Best Practices

​Border Style Classes

​Code Examples

​Best Practices

​Related Utilities

Border Style Classes

Code Examples

Best Practices

Related Utilities