Change searchbar border color in Ionic 6

[Raph]

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)”>

Thanks

[mariusbolik]

Hi,

--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;

Regards,
Marius

[Raph]

@mariusbolik

–box-shadow: 0px 0px 0px 2px #f1f1f1;

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

[mariusbolik]

@Raph

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

Glad to hear that! You’re welcome!