Simple & Easy Elementor Offset Border Design

Simple & Easy Elementor Offset Border Design

Check out our CSS Course, made especially for Elementor users.

Table of Contents

Let's learn how to add this awesome offset border to any Elementor column!

To begin with, copy this code under Advanced > Custom CSS for your column.

This will require Elementor Pro. For Elementor free users, give your Elementor a class name under Advanced, then replace 'selector' with your given class name. More information in the video!

selector > div::before{
    width: 100%;
    height: 100%;
    left: -16px;
    position: absolute;
    border: 3px solid #717171;

Then, adjust the code to get the design you want

If you want a different styling than what is offered by default. More information about this in the video.

Finally, enjoy your awesome Elementor offset border!

Let me know if everything works for you! also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly


Leave a Reply


CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.