How to Fix Border-Radius Bleeding and Shadow Irregularities in IE9 with Gradient Backgrounds?

Addressing Border-Radius Bleeding and Shadow Irregularities in IE9 with Gradient Backgrounds

In Internet Explorer 9, browser support for both border-radius (rounded corners) and background gradients is available. However, when combining these features, users have encountered an issue where the gradient bleeds outside of the rounded corners. Additionally, irregularities in shadows have been observed.

Solution

While IE9 may natively support both border-radius and background gradients, they do not work seamlessly together. To resolve the bleeding issue, one solution is to wrap the element with the gradient and rounded corners within another div. This outer div should have the same size and rounded-corner values as the inner element. By setting the overflow to hidden, a mask effect is created, effectively concealing the gradient overflow.

HTML

<code class="html"><div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div></code>

CSS

<code class="css">.mask {
    overflow: hidden;
}

.roundedCorners {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0065a4', endColorstr='#a0cf67', GradientType=0); /* IE6-9 */
}</code>

The above is the detailed content of How to Fix Border-Radius Bleeding and Shadow Irregularities in IE9 with Gradient Backgrounds?. For more information, please follow other related articles on the PHP Chinese website!