How to remove border radius from Select tag using Bootstrap ?

Last Updated : 26 Jun, 2020

<select> Tag: The <select> component is used to make a drop-down list. The <select> component is most frequently used in a form, to gather user input. The name attribute is required to reference the form data after the form is submitted (in case you exclude the name attribute, no data from the drop-down list will be submitted). The id attribute is required to relate the drop-down list with a name. The <option> tag inside the <select> component characterize the accessible choices within the drop-down list.

Syntax:

<select>
  <option>Option1</option>
  <option>Option2</option>
      .
      .
      .
  <option>Option n</option>
 </select>

Attributes:

autofocus: Indicates that the drop-down list ought to consequently get focus when the page loads. (value: autofocus)
disabled: Indicates that a drop-down list ought to be disabled. (value: disabled)
form: Characterizes which form the drop-down list has a place to. (value: form_id)
multiple: Indicates that multiple options can be chosen at once. (value: multiple)
name: Characterizes a name for the drop-down list. (value: name)
required: Indicates that the user is required to choose a value some time recently submitting the form. (value: required)
size: Characterizes the number of visible options in a drop-down list. (value: number)

We can remove border radius from Select tag by two methods as follows:

Method 1: Using CSS: Use some CSS property to remove the border radius.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> 
    Remove border radius from 
    Select tag in css 
  </title> 
  
  <style type="text/css"> 
      
    /* To remove border radius */ 
    select { 
      height: 20px; 
      -webkit-border-radius: 0; 
      border: 0; 
      outline: 1px solid #ccc; 
      outline-offset: -1px; 
    } 
  </style> 
</head> 
  
<body> 
  <center> 
    <h3 style="color: green"><br /> 
      GeeksforGeeks 
    </h3><br /> 
      
    <select> 
      <option>Option1</option> 
      <option>Option2</option> 
      <option>Option3</option> 
      <option>Option4</option> 
      <option>Option5</option> 
    </select> 
  </center> 
</body> 
  
</html>

Output:

Method 2: Using Bootstrap: The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> component. Custom select menus require as it were a custom class, .custom-select to trigger the custom styles. Custom styles are restricted to the select’s starting appearance and cannot alter the option’s due to browser restrictions.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <!-- Required meta tags -->
  <meta charset="utf-8"> 
  <meta name="viewport" content= 
    "width=device-width, initial-scale=1,  
    shrink-to-fit=no"> 
  
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity= 
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
    crossorigin="anonymous"> 
  
  <script src="https://kit.fontawesome.com/577845f6a5.js" 
    crossorigin="anonymous"> 
  </script> 
    
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js,  
    then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity= 
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"> 
  </script> 
    
  <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"> 
  </script> 
    
  <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity= 
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"> 
  </script> 
    
  <title> 
    Remove border radius from  
    Select tag in bootstrap 
  </title> 
    
  <style type="text/css"> 
      
    /* For default browser setting */ 
    select:not([multiple]) { 
      -webkit-appearance: none; 
      -moz-appearance: none; 
      padding: .5em; 
      padding-right: 1.5em 
    } 
  
    /* To remove default border radius */ 
    #mySelect { 
      border-radius: 0 
    } 
  
    /* Optional styling */ 
    option { 
      font-size: 1.1rem !important; 
      font-weight: bold; 
      text-transform: uppercase !important; 
      color: #013208 !important; 
    } 
  </style> 
</head> 
  
<body> 
  <center> 
    <br /> 
    <h3 style="color: green"><br /> 
      GeeksforGeeks 
    </h3><br /> 
      
    <select id="mySelect" class="custom-select"
      style="width:150px; 
        background-color: lightgreen; 
        font-weight:bold;color:#013208;"> 
      <option value="1">G</option> 
      <option value="2">E</option> 
      <option value="3">E</option> 
      <option value="4">K</option> 
      <option value="5">S</option> 
      <option value="6">F</option> 
      <option value="7">O</option> 
      <option value="8">R</option> 
      <option value="9">G</option> 
      <option value="10">E</option> 
      <option value="11">E</option> 
      <option value="12">K</option> 
      <option value="13">S</option> 
    </select> 
  </center> 
</body> 
  
</html>

Output:

We can use select tag and .custom-select class with form-control as follows

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <!-- Required meta tags -->
  <meta charset="utf-8"> 
  <meta name="viewport" content= 
    "width=device-width, initial-scale=1,  
    shrink-to-fit=no"> 
  
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity= 
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
    crossorigin="anonymous"> 
  
  <script src="https://kit.fontawesome.com/577845f6a5.js" 
    crossorigin="anonymous"> 
  </script> 
    
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js,  
       then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity= 
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"> 
  </script> 
    
  <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"> 
  </script> 
    
  <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity= 
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"> 
  </script> 
    
  <title> 
    Remove border radius from  
    Select tag in bootstrap 
  </title> 
    
  <style type="text/css"> 
      
    /* For default browser setting */ 
    select:not([multiple]) { 
      -webkit-appearance: none; 
      -moz-appearance: none; 
      padding: .5em; 
      padding-right: 1.5em 
    } 
  
    /* To remove default border radius */ 
    #mySelect { 
      border-radius: 0 
    } 
  </style> 
</head> 
  
<body> 
  <center> 
    <br /> 
    <h3 style="color: green"><br /> 
      GeeksforGeeks 
    </h3><br /> 
      
    <form> 
      <div class="form-group"> 
        <label for="mySelect">Email address</label> 
        <input type="email" class="form-control" 
              id="mySelect" style="width:350px;" 
              placeholder="name@example.com"> 
      </div> 
      <div class="form-group"> 
        <label for="mySelect"> 
          Select options 
        </label><br /> 
          
        <select class="form-control custom-select"
          style="width:150px;" id="mySelect"> 
          <option>Option 1</option> 
          <option>Option 2</option> 
          <option>Option 3</option> 
          <option>Option 4</option> 
          <option>Option 5</option> 
        </select> 
      </div> 
    </form> 
  </center> 
</body> 
  
</html>