How to Add Short Vertical Borders Between Elementor CTA Widgets

This tip explains how to add light gray vertical dividers (70% height) between selected
Elementor Call to Action (CTA) widgets. This works great for dashboards and grid-style layouts
and does not affect CTA widgets globally.

What This Does

• Adds a vertical border between specific CTA widgets
• Border height is 70% of the widget
• Border is centered vertically
• Applies only to the selected container

Step 1: Add a CSS Class to the Parent Container

Edit the page in Elementor and select the container that holds the CTA widgets
(for example, a row with three CTA widgets).

Go to Advanced → CSS Classes and add:

dashboard-cta-grid

Step 2: Add a CSS Class to the CTA Widgets

Add the class only to the CTA widgets that should display a right-side divider
(for example: widgets 1, 2, 4, and 5).

1. Select a CTA widget
2. Go to Advanced → CSS Classes
3. Add:

dashboard-divider

Important: Do not add this class to the last widget in each row.

Step 3: Add the CSS Code

Go to Appearance → Customize → Additional CSS and paste the following code:

/* =========================================================
   START – Dashboard Page (Client Dashboard)
   Feature: CTA vertical dividers
   Description:
   - Adds a light gray vertical divider (70% height)
   - Applied only to CTA widgets inside .dashboard-cta-grid
   ========================================================= */

.dashboard-cta-grid .dashboard-divider .elementor-cta {
  position: relative;
}

.dashboard-cta-grid .dashboard-divider .elementor-cta::after {
  content: "";
  position: absolute;
  top: 15%;
  right: 0;
  width: 1px;
  height: 70%;
  background-color: #e5e5e5;
  z-index: 3;
  pointer-events: none;
}

/* =========================================================
   END – Dashboard Page (Client Dashboard)
   ========================================================= */

Step 4: Regenerate Elementor Files

After saving the CSS, do the following:

1. Go to Elementor → Tools
2. Click Regenerate Files & Data
3. Clear your cache (WP Rocket, LiteSpeed, etc.)
4. Hard refresh the page (Ctrl + F5)

Notes & Tips

• This solution is designed specifically for Elementor CTA widgets
• The z-index is required because CTA widgets use a background overlay
• No extra HTML elements are needed
• You can add a mobile media query later to hide the borders on small screens

When to Use This

• Dashboards
• Admin-style layouts
• Feature grids
• CTA sections that need subtle visual separation