You might be saying "Duh – just use the CSS 3 border-radius style". Or, you might be saying "Who is this guy? Why doesn't he just use a JavaScript corner rounding script?".
If you've checked out any IE browser before IE 9, you've noticed that border-radius doesn't happen. It's part of the CSS 3 spec, and hence not supported in IE 8.
I actually can't speak for all JS corner rounding scripts, there may be a good one out there that does a good job of rounding form elements "out-of-the-box". But, every one I've tested required some tweaks. It's not form elements per say that cause issue, but inline elements all-together.
So, what do we do when an inline element is giving us slack? Wrap it in in a block-level element!
The following jQuery code leverages the jquery.corner.js plugin.
$('input[type!=file], select, textarea').wrap('<div class="text-input" />').css('border', '0').css('background', 'none');
$('.text-input').wrap('<div class="text-input-wrapper" />');
$('.field .text-input').corner("round 5px").parent().corner('round 5px');
CSS
.text-input { background: #fff; }
.text-input-wrapper { padding: 1px; background: #888; } /* the background color will actually be the border color */