title: Change Bootstrap's select border-radius
body: <p>I am not able to change the border-radius for the select elements in Bootstrap 3. I tried changing some other attributes like background-color or border-color, those worked for me. The only style that doesn't work is the border-radius.
  I don't know what I'm doing wrong.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;form role="form" class="form-horizontal" method="get" action="&lt;?php $_SERVER['PHP_SELF']; ?&gt;"&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-6 col-md-offset-3"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control search-box" placeholder="Search"&gt;
                      &lt;span class="input-group-addon"&gt;
                          &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-6 col-md-offset-3"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;select class="form-control"&gt;&lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;select class="form-control"&gt;&lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      padding: 0;
      margin: 0;
  }
  
  .form-horizontal {
      margin-top: 50px;
  }
  
  /* Remove border-radius, box-shadow, border-right and transition of input box */
  .search-box {
      border-radius: 0px;
      box-shadow: none !important;
      border-right: none;
      transition: none;
      font-size: 16px;
  }
  
  /* Remove addon border-radius to match input border-radius */
  .input-group-addon {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      background-color: #fff;
  }
  
  /* Change addon border-color to the same color as the input box when input:focus */
  .search-box:focus, .search-box:focus + span {
      border-color: #3498db;
  }
  
  /* Trying to change border-radius on the select element, not working... */
  select {
      box-shadow: none !important;
      transition: none !important;
      border-radius: 0px !important;
  }
  </code></pre>