Rounded borders for newsletter form

Store Design
, , ,

Topic summary

A user seeks to add 30px rounded borders to both the newsletter form input field and submit button in their footer, noting no built-in settings exist for this customization.

Multiple CSS solutions provided:

  • Custom CSS method: Add code targeting .t4s-newsletter-design-1 classes through Theme Customize > Theme settings > Custom CSS
  • base.css method: Insert code at end of base.css file via Edit Code, targeting .t4s_frm_input and related selectors with !important flags
  • theme.liquid methods: Inject <style> block either before </head> or </body> tag

All solutions use similar CSS targeting the newsletter container classes (.t4s-newsletter__inner, .t4s-newsletter__email, .t4s-newsletter__submit) with border-radius: 30px values.

Resolution: The original poster accepted one of the solutions, confirming the issue was resolved. The discussion demonstrates multiple valid approaches to the same styling problem, differing primarily in file location and selector specificity.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi, I would like my newsletter form in the footer as well as its button to be rounded 30px, can anyone help ?
(No settings for this)
https://c50810-c5.myshopify.com/

Daniel19901_0-1726047750068.png
Daniel19901_0-1726047750068.png1134×312 15.7 KB

2

Hi @Daniel19901

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.t4s-newsletter-design-1 .t4s-newsletter__inner .t4s-newsletter__email {
border-radius: 30px 0 0 30px;
}
.t4s-newsletter__inner .t4s-newsletter__submit {
border-radius: 0 30px 30px 0
}

Screenshot 2024-09-11 at 16.46.17.png
Screenshot 2024-09-11 at 16.46.17.png1066×303 18.2 KB

3

Hello @Daniel19901
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.t4s_frm_input:focus, input:not([type=submit]):not([type=checkbox]):focus, select:focus, textarea:focus {
border-radius: 30px !important;
}
button.t4s-w-100.t4s-newsletter__submit.t4s-truncate.t4s-btn-loading__svg {
border-radius: 30px !important;
}

result

5.png
5.png740×223 11 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi @Daniel19901

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1726048395539.png
PageFlyRichard_0-1726048395539.png1193×953 80.1 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

5

Hello @Daniel19901

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.t4s-newsletter-design-1 .t4s-newsletter__inner .t4s-newsletter__email { border-radius: 30px 0 0 30px; } .t4s-newsletter__inner .t4s-newsletter__submit { border-radius: 0 30px 30px 0 }

Tech_Coding_0-1726048784541.png
Tech_Coding_0-1726048784541.png693×172 15.5 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

6

Thanks for accepting the solution.
Please hit the like button also.