how to make select dropdown with rounded border?

i am using select tag for dropdown menu, using css i made select box to be rounded corner, by doing this drop down menu remains square, i also want to turn that rounded corner.

here is the live demo


<p class="formRight">
<span style="padding-right:100px">Lead Type: </span>

    <select id="leadType" class="box2" name="lead_type">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>


.formRight select {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 10px #E8E8E8 inset;
    height: 40px;
    margin: 0 0 0 25px;
    padding: 10px;
    width: 110px;

Your Help will be appreciated. Thanks in advance.

Please check the solution :

Live demo :

  border:1px solid #cccccc;
<div class="selectWrapper">
  <select class="selectBox">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>

Rounded corner <select> drop down, You get very little control on the style of the dropdown of a native select control, and you certainly can't add rounded borders to it. To achieve� To make the select round you first have to define the border because the default border is specially supplied and won't round. select { width:150px; border:1px solid red; -webkit-border-top-right

This is my solution.


.selectBox{border-radius:4px;border:1px solid #AAAAAA;}


<select class="selectBox">

CSS3 rounded corner + <select> drop down - HTML & CSS, I need help in using the CSS3 rounded corner to style my <select> drop down. So far I have this: #example1 { border-radius: 15px; width:150px; <select� How to make Rounded Border DropDownButton in Flutter In this Google flutter code example we are going to learn how to make rounded border dropdownbutton in flutter. The code is based on flutter version 1.0.0

Ankur, drop-down lists are controlled by the users operating system so full styling of these elements aren't possible. To achieve the look you desire you may wish to consider developing, or using a third-party custom drop-down list.

From looking at your fiddle; Demo 5 by Hugo Giraidel may provide you with with what you're looking for.

Basically it uses HTML <li> elements and then using JS/jQuery it creates the drop-down list effect with a couple of basic transition effects.

how to make select dropdown with rounded border?, i am using select tag for dropdown menu, using css i made select box to be rounded corner, by doing this drop down menu remains square, i also want to turn� How to Add Rounded Rectangle Border? Below Code didn't result in any border on screen. Container(margin: EdgeInsets.only(top: 10.0, right: 10.0, left: 10.0), width

Have you looked at this Stackoverflow post? CSS - Border Radius for the drop down box when using the SELECT tag? Not the SELECT input ittself, the actual drop down box? Because what you are asking is not possible (or at leat not cross-browser compatible)

To make it work AND make it cross-browser compatible, you would have to create an dropdown/select with DIV elements (or any non form elements) and update their values with JS/jQuery to a hidden select. That way you can style the DIV the way you want without limitations.

This may help you out: JQuery Auto Complete substitute for Select Drop Down

CSS Rounded Corners, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� This css applies to the INPUT and SELECT tags found within a specific page. Now, this does style the drop down box on the focus event, with the background transforming to blue (works in Firefox) What I want to do though, is add a curved border to the drop down box, so that it blends in more with the select input itself.

I don't now why, but it works when remove select default arrows

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;

select::-ms-expand {
  /* For IE10 */
  display: none;

select {
  border-radius: 20px;
  width: 100px;
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;

Style Dropdown Select Menus in Chrome, They all look like the image below – rounded corners and narrow in height, compared to Firefox, even though they have the same CSS styles as� CSS border-radius Property. The CSS border-radius property defines the radius of an element's corners. Tip: This property allows you to add rounded corners to elements! Here are three examples: 1. Rounded corners for an element with a specified background color: Rounded corners! 2. Rounded corners for an element with a border: Rounded corners! 3.

CSS only fix for select with rounded corners on OSX � GitHub, CSS only fix for select with rounded corners on OSX - ifYouPreferSass. Here's a way to get rid of them and add an arrow back in using CSS only. I found this fix on JS fiddle (after <select>. <option selected="selected">Select One</option>. I made a form for a site and all textboxes have rounded corners except the select drop down box. I made a rounded box style and it shows but the original square also shows behind it. Is there any way I can remove this so my is the only one that shows.

Chrome doesn't honor border-radius on <select>s � Issue #15588 , Basically if you have the following HTML: <div class="input-group"> <select class="form-control input-sm"> <option value="4242" selected="">Visa in Safari and Chrome—have rounded corners that cannot be modified via� I am trying to style this bootstrap dropdown menu to look like this: I want all the lines to connect and then the top border of the UL just go until the intersection of the LI like so in the imag

How to style a dropdown using CSS?, There are many ways to design <select> dropdown menu using CSS. cursor: pointer;. border:1px solid black;. border-radius:3px;. } .select {. The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon ( ), which indicates that the button is a dropdown.

  • These controls are handled by the OS so you may wish to consider creating your own drop-down list using CSS and JS.
  • @MatthewBaker how to create our own drop-down list?
  • @AnkurDhanuka You can create your own styled dropdown using HTML & JS. You can try jQuery plugins such as this:
  • Read this question:…
  • I guess you can not style a select options in a way you want!!! Try some alternatives, say an <ul> tag with <li> as the options and do style them... it will be pretty easy approach
  • I'd add width: initial instead width: 140px;
  • Using custom select often ends with bad user experience. It is really hard to create good select box with good accessibility. This example also has issues. Demo and usage in production are different things...