Better Radio Option Styles

What this changes#

Long radio-button lists can be hard to scan when every option sits close to the next one. This CSS turns each choice into a simple card with more breathing room, a light border, rounded corners, and a larger clickable label area.

Add the CSS to one page#

Use this method when the styling should apply only to the page that contains the form.

1. Open the page in Beaver Builder.
2. Open Tools in the top bar and choose Layout Settings.
3. Select the CSS tab.
4. Paste the CSS below, then save and publish the page.

.gform_wrapper.gravity-theme .gfield_description {
  padding-top: 0;
}

.gfield_radio .gchoice {
  margin-bottom: 12px !important;
  border: 1px solid var(--base-400);
  border-radius: 8px;
  width: 100%;
  padding-left: 12px;
}

.gfield_radio .gchoice label {
  width: 100%;
  padding: 12px;
}

The margin-bottom separates the choices. The border and radius define each option, while the padding keeps the radio control and its label away from the edges.

Note: The border uses the Digital Church design token --base-400. If your site does not define that token, replace var(--base-400) with a light gray such as #d8dee6.

Limit the style to one form#

The first version styles every Gravity Forms radio field on the page. To target one form, prefix both radio selectors with that form’s wrapper ID. Replace 2 with your form ID.

#gform_wrapper_2 .gfield_radio .gchoice {
  margin-bottom: 12px !important;
  border: 1px solid var(--base-400);
  border-radius: 8px;
  width: 100%;
  padding-left: 12px;
}

#gform_wrapper_2 .gfield_radio .gchoice label {
  width: 100%;
  padding: 12px;
}

You can find the form ID in Forms in the WordPress dashboard. It also appears in the shortcode, for example [gravityform id="2"].

Apply it across the whole site#

If every radio field should use this treatment, add the first CSS block to Appearance → Customize → Additional CSS instead. Site-wide CSS affects Gravity Forms on every page, so check existing forms before leaving it in place.

Check the result#

View the page outside Beaver Builder and test it at desktop and mobile widths. Confirm that long labels wrap cleanly, each label still selects the correct radio button, and conditional logic continues to reveal the expected fields.

If the old styling still appears, clear the page cache and reload the page in a private browser window.