html - search bar ignoring radius from css and keeping sharp corners

Question

I am building an android application using angular nativescript and i want my application to have a search bar with round corners. I wrote this code in my html:

<SearchBar class="search"></SearchBar>

And added to the css this:

.search{
    border-radius: 30;
}

But the search bar keeps its corners with no radius as seen in the picture. What should i do?

Answer 1

Assign the unit of the property value:

.search{
    border-radius: 30px;
}