Modify Search Bar to be square edged?

Store Design
, , ,

Topic summary

A user wants to modify their Shopify store’s search bar from rounded edges to square or less-rounded corners. They’ve attempted using border-radius CSS but encountered difficulties targeting the correct elements.

Visual Goal:
Two reference images show the current rounded search bar versus the desired squared appearance.

Proposed Solutions:
Multiple CSS approaches were offered:

  • Targeting pseudo-elements and input: Apply border-radius: 10px to .search-modal__form .field:before, .field:after, and .field__input
  • Using !important flag: Add border-radius: 10px !important to form.search.search-modal__form .field:after and .field__input
  • Modifying CSS variables: Change the root variable --inputs-radius from 20px to 0 (for completely square edges)
  • Comprehensive selector targeting: Apply border-radius to both the input element and form pseudo-elements

Implementation:
All solutions require adding CSS code to the theme’s base.css file via Shopify Admin → Online Store → Themes → Edit code.

The discussion remains open with no confirmed resolution from the original poster.

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

Modify Search Bar to be square edged?

Trying to target the search bar, not sure if its field, or search__input - but I want to make it more square edged.

I know once I change the before I also need to change the after?

www.extremekool.com

Password01

I tried border radius didnt work though

IMAGE1: My current search bar

111Capture.PNG

IMAGE2: Search bar I would like mine to look like:

222Capture.PNG

2

@Brian-A please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.search-modal__form .field:before, .search-modal__form .field:after, .search-modal__form .field__input{border-radius: 10px;}
1 Like
3

Hi @Brian-A

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
form.search.search-modal__form .field:after, 
form.search.search-modal__form .field__input  {
    border-radius: 10px !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
4

Hello,

This is your current code add it to your base.css and change it to 0 and keep important on it and it will work.

:root {
–inputs-radius: 20px !important;
}

1 Like
5 
input.search__input.field__input::before, input.search__input.field__input::after, .form.search.search-modal__form::before, .form.search.search-modal__form::after {
  border-radius: 10px !important;
}