Elementor is a powerful WordPress page builder that allows you to create stunning and responsive websites with ease. One of the features of Elementor is the Counter widget, which lets you display a progress bar with a number and a title. This widget can showcase your achievements, skills, statistics, or any other numeric data.
On the other hand, we came across a minor issue: it is not easy to change the counter’s shape. The Elementor Counter widget comes with a horizontal bar as its default shape, and there is no option to make it a circle counter directly.
This article will show you how to create a circular counter appearance by creatively combining a few of Elementor’s native features or simply adding custom CSS.

How to Create a Circle Counter in Elementor (without Add-on)
1. Set up the Containers
First, go to your Elementor editor by creating a new post type (page or post) or selecting an existing one.
Once you enter the Elementor editor, add a new container with two columns.

Afterward, navigate to the main container settings, and we will apply some changes here:

- Set the width of the widget to 900px and add 10px for both gaps (column and row)

For this example, we will create four counter widgets, so duplicate the inner container two times.

2. Add the Counter Widget
Next, add the Counter widget by selecting it from the widget panel and then dragging and dropping it into one of the inner containers.

Alright, now it’s time to set the widget. Here are the following changes we applied to the widget:
Content Tab
Replace the number and the title with your preference.

Style Tab
Number: We set the size of the number to 20 pixels.
Title: We set the size of the title to 12 pixels, and for the weight, we set it to 600 (Semi Bold).

Advanced Tab
As we mentioned at the beginning of this article, you can create a circular counter by combining a few of Elementor’s native features or simply adding custom CSS. Here, we will show you how to achieve a circular counter appearance with those methods.
- Method 1: Add the Custom CSS
Please copy the CSS snippet below and paste it into the Custom CSS input field (Advanced tab > Custom CSS).
selector { border: 5px solid #000000; border-radius: 50%; margin-right: 40px; margin-left: 40px; padding-top: 30px; padding-bottom: 30px; }

- Method 2: Customize the Advanced Settings
In this method, we will combine some of the native Counter widget features that are available in Advanced Settings, such as borders, margins, and paddings.
- Border
- Set the border type to Solid.
- Add 5 pixels of border width for all sides (top, right, bottom, left).
- Converts the units of the border-radius from px to %, then adds 50% for all sides (top, right, bottom, left).

- Layout
- Margin: Add 40 pixels of right and left margin.
- Padding: Add 30 pixels of top and bottom padding.

Note: The values you added on the CSS or Layout section (Margin and Padding) to achieve a perfect circular shape depend on the “scenario” you choose, such as how many inner containers you use, the size and length of the text, etc. Let’s say, that if you use three inner containers (columns), the margin and padding will be around 50px. Feel free to experiment with the values to get the best circle counter.
The Bottom Line
This article shows how easily you can create a circle counter in Elementor without the help of any add-ons. We take you through two different approaches: using custom CSS and creatively combining several of Elementor’s built-in features.
Ultimately, the best method depends on your comfort level with the code and your desired level of control over the counter’s appearance. Both methods successfully bypass the need for additional Elementor add-ons, proving you can still create visually appealing circle counters within Elementor’s native capabilities.