title: What should I do to round the edges on my search box?
body: <p>I am a newby coder, so forgive me for asking what is probably a stupid question. For some reason, I was able to round the edges on the search button, but cannot successfully round the edges of the search bar.</p>
  <p><a href="https://i.stack.imgur.com/5BAcW.png" rel="nofollow noreferrer">click here to see image of navbar im working with</a></p>
  <p>Navbar.jsx</p>
  <pre><code>import React from 'react';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import * as ReactBootStrap from 'react-bootstrap';
  import { CgSearch } from 'react-icons/cg';
  import { BsFillPersonFill } from 'react-icons/bs';
  import { FiMail } from 'react-icons/fi';
  import { FaPlus } from 'react-icons/fa';
  import { AiTwotoneBell } from 'react-icons/ai';
  import './navbar.css';
  
  function Navbar() {
    return (
  
      &lt;section className=&quot;search-bar&quot;&gt;
        &lt;div className=&quot;row&quot;&gt;
          &lt;div className=&quot;col-lg mx-auto&quot;&gt; 
  
            &lt;form&gt;
              &lt;div&gt;
                &lt;div className=&quot;input-group&quot;&gt;
                  &lt;div className=&quot;homeBtn&quot;&gt;
                  &lt;h3&gt;VIZZEY&lt;/h3&gt; 
                  &lt;/div&gt; 
                
                  &lt;input type=&quot;search&quot; placeholder=&quot;Search&quot; className=&quot;form-control&quot; /&gt;
                  &lt;button className=&quot;searchBtn&quot;&gt;&lt;CgSearch /&gt;&lt;/button&gt;
                  &lt;div className=&quot;input-group-append buttons&quot;&gt;
                  
                    
                    &lt;div className=&quot;icon&quot;&gt;
                      &lt;button className=&quot;icon-btn&quot;&gt;
                        &lt;h4&gt;&lt;FiMail /&gt;&lt;/h4&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;icon&quot;&gt;
                      &lt;button className=&quot;icon-btn&quot;&gt;
                        &lt;h4&gt;&lt;FaPlus /&gt;&lt;/h4&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;icon&quot;&gt;
                      &lt;button className=&quot;icon-btn&quot;&gt;
                        &lt;h4&gt;&lt;AiTwotoneBell /&gt;&lt;/h4&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;icon&quot;&gt;
                      &lt;button className=&quot;icon-btn&quot;&gt;
                        &lt;h4&gt;&lt;BsFillPersonFill /&gt;&lt;/h4&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                  
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    )
  }
  export default Navbar;
  </code></pre>
  <p>Navbar.css</p>
  <pre><code>.searchBtn {
      color: #fff;
      background-color: #00ff9d;
      height: 38px; 
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px; 
      width: 40px;   
      border: black; 
  }    
  
  form {
      padding-top: 10px;
  }
  
  .icon {
      /* border-radius: 20px;  */
      padding-right: 20px;
  } 
  
  .form-control {
  border-top-left-radius: 10px;
  background-color: rgb(196, 196, 196); 
  border-color: rgb(133, 133, 133);  
  
  } 
  
  .form-control:focus-within {
      background-color: rgb(196, 196, 196); 
      border-color: rgb(133, 133, 133); 
      outline: none;  
   
  }
  
  .search-bar {
      width: auto; 
      border: solid  #1c1f29; 
      background-color: #1c1f29; 
      padding-bottom: 10px;
  }
  
  .icon-btn {
      height: 40px; 
      width: 40px; 
      border-radius: 5px; 
      background-color: #00ff9d;
      color: white; 
      outline-color: chocolate;
  }
  
  .homeBtn {
      padding-right: 60px; 
      padding-left: 50px; 
      color: #00ff9d;  
   
  } 
  
  .buttons {
      padding-left: 55px; 
      padding-right: 15px;
  }
  
  </code></pre>
  <p>Can anybody play around with it and make the left side round life the right side? I thought it would be as simple as adding &quot;border-top-left-radius: 5px&quot; and &quot;border-bottom-left-radius: 5px&quot; to &quot;.form-control&quot; in CSS, since that's the class that controls the search bar. But it isn't changing anything.</p>
  <p>Also...
  bonus points if you can also get the border around buttons on the right removed to look like the search button.</p>