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
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
This recipe can be found in it's original form on Stack Over Flow.