Rounded borders and gradients in IE9

A CSS-only technique to have IE9 nicely display rounded borders together with background-gradients.

HTML

<div class="gradient1">Classic approach: Gradient-Filter (but: edges broken)</div>
<div class="gradient2">New approach: Inset Box-Shadow (yay, this works!)</div>

CSS

.gradient1, .gradient2 {
margin: 30px 10px;    
padding: 40px;
border: 1px solid #000;
border-radius: 20px;
}

.gradient1 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',endColorStr='#CCCCCC');
}
.gradient2 {
/* lower color */
/* 
box-shadow: inset 0 [element's height] [element's height] [element's height]*-0.5 [upper color] 
*/
}