> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Border Style in AtomicKit: Solid, Dashed, and None

> Apply border styles to Elementor elements using AtomicKit's border-solid, border-dashed, and border-none utilities to define how border lines are drawn.

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:**

```html theme={null}
<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:**

```html theme={null}
<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:**

```html theme={null}
<div class="border-0 border-none">
  <!-- Explicitly resets both the border width and style to nothing -->
</div>
```

<Tip>
  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.
</Tip>

## 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](/borders/width) — Set the thickness of your border before applying a style.
* [Border Radius](/borders/radius) — Round the corners of your styled element.