How to make a search bar a capsule shape

Issue

I want to make a search bar a capsule shape instead of the regular rectangle shape search bars usually are when you make them. I have provided the code I have created so far:

#search {
    border: none;
    padding: 10 20px;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    background: grey;
}

<form>
    <!-- <span class="material-symbols-outlined">search</span> -->
    <input type="text" id="search" placeholder="search...">
</form>
  

I am expecting a search bar which is shaped like a typical capsule shape so it is flat at the top and bottom but rounded at the left and right. Have tried looking at buttons through W3schools article.

Solution

turn on the border, for example -> border: 1px solid and use the border-radius property more than 50% of the search bar height for example ->

#search {
  height: 40px;
  border-radius: 22px;
}

Answered By - Matek