Border Style

The bundled border styles: solid, dashed, and none.

Overview

Border style utilities define how a border line is drawn. The shipped set is intentionally small and covers the common UI cases.

Class	Style	CSS	Usage
.border-solid	Solid	border-style: solid;	Default border treatment
.border-dashed	Dashed	border-style: dashed;	Optional or secondary framing
.border-none	None	border-style: none;	Remove border style

Example

Examples

<div class="elementor-element border-2 border-solid padding-4 background-white rounded">
  Solid border
</div>
<div class="elementor-element border-2 border-dashed padding-4 background-white rounded">
  Dashed border
</div>
<div class="elementor-element border-0 border-none padding-4 background-gray-light rounded">
  No border
</div>

Best Practices

• Use border-solid for most buttons, inputs, cards, and structural UI.
• Use border-dashed sparingly for optional, provisional, or drop-zone style patterns.
• Pair style with explicit width and color classes so the full border treatment is obvious in markup.
• Use border-none intentionally when a component preset adds a border you want removed.

Related Utilities

Border Width

Border width utilities

Border Radius

Border radius utilities