A user wanted to round the corners of the email subscription box and country/region dropdown in Shopify’s Dawn theme. Despite attempts to modify the code with ChatGPT’s help, the default rectangular border persisted.
Solution provided:
Asset > base.css.field, .select, and related classes with border-radius: 10px;Outcome:
The solution worked immediately. The original poster increased the value to 20px for a more rounded appearance.
Status: Resolved. The CSS modification successfully rounded all targeted form elements in the footer.
Hi!
I am using the Dawn theme for my online store and I would like to change the borders of the email subscription box and also the country/region dropdown to a more rounded look. I managed to do that to some extent on the email subscription box, but the default Dawn rectangular border around the text box still remains. I have tried to change it in ‘‘Edit code’’ as well with the help of Chatgpt, but it hasn’t worked in any way.
Thanks in advance for all the help!
Hello @NelRas ,
I hope you’re doing well!
You can fix this in 20 seconds:
.field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after,
.field,
.field__input, .select__select, .customer .field input, .customer select,
.field:before, .select:before, .customer .field:before, .customer select:before, .localization-form__select:before{
border-radius: 10px; !important;
}
You can change the 10px value to anything else.
If it helps you please click on the “like” button and mark this answer as a solution.
Thank you.
Best,
Diego
Amazing, it worked perfectly! I changed 10 px to 20 px for a more rounded look. Thank you!
Please help me, Sir. Thank you.