Note: We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

With this hack, you can add border shadow to your columns.

Step 1. Style your columns.

Before adding custom code you will need to create and style your columns. Make sure that your content stays in the same column, drag your modules right under your previous module then use "Spacing" in "Content" tab to give some space between your modules:

Step 2. Add column class name.

After your columns are ready click on any module in the column to open the settings. Switch from "Content" to "Column" tab, find the "Miscellaneous" option and give your column "shadow-box" class name:

Repeat these steps to add a class name for every column in the row.

Step 3. Add custom CSS.

In the "Look & Feel" > "Edit Custom CSS" add the following CSS:

#content-holder .shadow-box {
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2) !important;
  border-radius: 15px !important;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
  .shadow-box {
    width: calc(100% - 30px) !important;
    flex-basis: calc(100% - 30px) !important;
    min-width: calc(100% - 30px) !important;
  }
}

@media screen and (min-width: 768px) {
  .shadow-box {
    width: calc(100% / 3 - 30px) !important;
    flex-basis: calc(100% / 3 - 30px) !important;
    min-width: calc(100% / 3 - 30px) !important;
  }
}

Finally, add top and bottom "Spacing" to your "Column" so border shadow won't stick to your content:

In the end, you will receive this result:

Please note, the shadow will not be visible in your page editor. To check your progress you will need to click "Preview" of your page.

Happy building 😉