CSS select with rounded corner and overlapping background color


I am applying a border radius on a select element that has a background color. Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box. I can't figure out what css property I must use to solve this issue.

background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;

Here is the jsfiddle: http://jsfiddle.net/JsgnR/

thanks for your help

Problem courtesy of: Vincent


My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.

you see that on the options , try to style them via css, you are not able and they look ugly

Solution courtesy of: john Smith


You can wrap <select> element in <span></span> and add the required properties to css for

This solution: http://jsfiddle.net/JsgnR/5/

Discussion courtesy of: Margin Right

This recipe can be found in it's original form on Stack Over Flow.