Change searchbar border color in Ionic 6

Hi all!

I’ve been trying to make a white border around a seachbar, but it does not take

.search-input {
–color: white;
–background: black;

–padding-start: 15px!important;
width: 650px!important;
font-size: 0.9em;

–border-radius: 13px !important;
border: 2px solid #f1f1f1 !important;


It displays like this… I would like the border to circle round the search bar not be too far off.

This is the button in the view
<ion-searchbar class=“search-input” value=“Ionic” (keyup)=“sendData($event)”>



--border-radius changes the border radius of the search bar, but you created your own border around the search bar. So simply use border-radius without -- at the beginning.
Alternatively, you can use box shadow to archive the same effect: --box-shadow: 0px 0px 0px 2px #f1f1f1;


1 Like

–box-shadow: 0px 0px 0px 2px #f1f1f1;
did the trick, thank you very much :slight_smile:

Glad to hear that! You’re welcome! :slight_smile:

1 Like