Border in ion-searchbar input

Ionic Framework
1

I’ve been trying using css for border-radius to make my ion-searcbar like this (first picture "candy), is there anyway to make my ion-searchbar like this(first picture “candy”). This is my current ion-searchbar (second picture).
image
Untitled

2

If you are using ionic 4 then pust this css in global.scss:

.searchbar-input.sc-ion-searchbar-md {
  border-radius: 25px;
  background-position: left 8px center;
  height: auto;
  font-size: 1.1rem;
  font-weight: 400;
  color: #7f8490;
  background-color: white;
  -webkit-box-shadow: 0 8px 14px rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.1) !important;
}
1 Like
3

afte using the syntax that you’ve given, and this is the result
Untitled

I also tried to change the value of the border radius, but the result always the same like the picture I attached.
please enlighten me, how to make it more curvy? thanks

4

thy this in you css
border: solid 1px;