Make rounded borders for a certain column (Table layouts)

CSS Codes Pricing Table
1

Add the code for your layout to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings:

Classic Table:

.es-layout-classic-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-container:nth-child(1)::after,
.es-snap-carousel-item:nth-child(1) .es-column-container::after {
  border-radius: 16px;
}

Comparison Table:

.es-layout-comparison-table-container:not(:has(.es-snap-carousel-wrapper)) .es-column-container:nth-child(2)::after,
.es-layout-comparison-table-snap-carousel .es-snap-carousel-item:nth-child(2) .es-column-container::after,
.es-layout-comparison-table-mobile-snap-carousel .es-snap-carousel-item:nth-child(1) .es-column-container::after {
  border-radius: 16px;
}

Note: Replace numbers in brackets with the number of the needed column:

image
image623×340 17.8 KB

The number in the last line of the Comparison Table code=actual number−1. For example, if the real column number is 2, you should paste 1.

1 Like