css - How do I fix IE broken corners when using border radius (ridge) -

i styling div following:

border: ridge 5px #eeeeee; border-radius: 10px; 

in ie top of ridge breaks in upper right , lower left corners.

it looks fine in firefox. safari shows similar break. how fix or work around this?

i have seen before. ended doing faux ridge. requires more markup does work. here fiddle: http://jsfiddle.net/mt2ya/4/

html

<div class="ridge-outer">     <div class="ridge-inner">         content     </div> </div> 

css

.ridge-outer {     border: 2px solid #eee;     -webkit-border-radius: 15px;     -moz-border-radius: 15px;     border-radius: 15px; } .ridge-inner {     border: 2px solid #999;     -webkit-border-radius: 13px;     -moz-border-radius: 13px;     border-radius: 13px;     height: 200px;     padding: 20px; }