Rounded corners on MailChimp Email sign up

[INcroatia]

Hi there,

I’m hoping to make the email sign up have rounded corners (pill shaped) on this page https://kiermyer.com/dev/
AND/OR a square button.

Below is what I added to css but it didn’t do the trick. And when I make the Email Form have “Square” button it reverts to the site wide “pill” shape.

It would be great if you could help me figure out both solutions.

Thanks so much!!!

/MailChimp/

.x-subscribe-form fieldset {
width: 100%;
float: left;
}

.x-subscribe-form fieldset input[type=“email”] {
border-radius: 10px 4 4 10px;
height: 47px;
}

.x-subscribe-form fieldset input[type=“submit”] {
margin-top: 0;
border-radius: 10 4px 4px 10;
}
.x-subscribe-form fieldset input[type=“email”],
.x-subscribe-form fieldset input[type=“submit”] {
border-radius: 100em !important;
}
.x-subscribe-form input[type=“submit”] {
height: 47px;
@media(max-width: 1000px){

.x-subscribe-form fieldset {
width: 100%;
float: none;
}
/END OF MailChimp/

[paul.r]

Hi,

You can try this code instead.

.x-subscribe-form fieldset input[type="email"] {
     border-radius: 100em;
}

.x-subscribe-form fieldset input[type="submit"] {
     border-radius: 0;
}

Please add the code in Cornerstone > CSS

That way it will take effect on that page only.

Hope that helps.

[INcroatia]

Hi there,
Thanks for the quick reply but it doesn’t seem to have made a difference, even with !important

I now have it on the page CSS only.

[Prasant]

Hello @INcroatia,

Can you please try out following CSS instead:

.tco-subscribe-form input[type="email"] {
    border-radius: 25px;
}

.tco-subscribe-form input[type="submit"] {
    border-radius: 0px;
}

Thanks.

[INcroatia]

Thanks! This did the trick!

[nico]

Hi @INcroatia,

Happy to hear that.

Feel free to ask us again.

Thanks.