Bootstrap Input border colour and inside border issue

Question

As you can see, the form I have three input fields with inline labels. Actually, I'm providing the input field a border width, but the issue is that the bottom and right borders are taken by default. I'm not sure what the problem is. Second, the inside border appears when I click on input.

I wish to correct these bugs.

       .left-align{
            margin-right: 75px;
        }
        .search-input {
            margin-top: 5px;
            margin-bottom: 5px;
            display:inline-block;
            *display: inline;     /* for IE7*/          /* for IE7*/
            vertical-align:middle;
            margin-left:14px;
            border-width: 2px !important;
        }

        .search-label {
            display:inline-block;
            *display: inline;     /* for IE7*/
            zoom:1;              /* for IE7*/
            float: left;
            padding-top: 5px;
            text-align: right;
            width: 80px;
        }

          <div class="d-flex my-2 left-align flex-column gap-2 w-100 " >

                  <div class="block">
                      <label class="fw-bold search-label" >Warehouse</label>
                      <input class="search-input" type="search"/>
                  </div>
                  <div class="block">
                      <label class="fw-bold search-label">Location</label>
                      <input class="search-input" type="search"/>
                  </div>
                  <div class="block">
                      <label class="fw-bold search-label">Employee</label>
                      <input class="search-input" type="search"/>
                  </div>

           </div>

Answer 1

1. By default border takes it's default border color, so we have to mention border-color.
2. On focus in the input field it takes it's default border radius to 10px, so it also need to be declared(border-radius) as your wish to match with border radius.

By doing this, you can correct those bugs. 😊

.left-align{
  margin-right: 75px;
}

.search-input {
  margin-top: 5px;
  margin-bottom: 5px;
  display:inline-block;
  *display: inline;     /* for IE7*/          /* for IE7*/
  vertical-align:middle;
  margin-left:14px;
  border-width: 2px !important;
  border-color: black;  /* added border-color to match with border color */
  border-radius: 3px;   /* added border-radius to match with border radius on focus */
}

.search-input:focus{
  border-radius: 0px !important;
}
        
.search-label {
  display:inline-block;
  *display: inline;     /* for IE7*/
  zoom:1;              /* for IE7*/
  float: left;
  padding-top: 5px;
  text-align: right;
  width: 80px;
}

<div class="d-flex my-2 left-align flex-column gap-2 w-100 " >

                  <div class="block">
                      <label class="fw-bold search-label" >Warehouse</label>
                      <input class="search-input" type="search"/>
                  </div>
                  <div class="block">
                      <label class="fw-bold search-label">Location</label>
                      <input class="search-input" type="search"/>
                  </div>
                  <div class="block">
                      <label class="fw-bold search-label">Employee</label>
                      <input class="search-input" type="search"/>
                  </div>

           </div>