How to Prevent Gradient Bleeding with Rounded Corners in Internet Explorer 9?

IE9 Border-Radius and Background Gradients: Addressing the Bleeding Issue

Internet Explorer 9 (IE9) supports both CSS3 border-radius and background gradients, but combining these features poses a challenge. The gradient bleeds out of the rounded corners, creating an undesirable visual effect.

Understanding the Problem

To illustrate this issue, consider the following images. The first image shows the expected behavior, where there is no gradient bleeding but the corners are sharp. The second image exhibits the bleeding that occurs when gradient and rounded corners are combined.

[Image URL: https://i.sstatic.net/lCBe6.png]

[Image URL: https://i.sstatic.net/BbZ0D.png]

A Circumvention: Using a Masking Technique

One workaround for this problem is to employ a masking technique. This involves adding a wrapper div around the element with the gradient and rounded corners. The masking div should have the same dimensions, rounded corner values, and overflow set to hidden.

HTML Code:

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

CSS Code:

<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>

By using this workaround, the mask hides the gradient that bleeds outside the rounded corners, resolving the bleeding issue.

The above is the detailed content of How to Prevent Gradient Bleeding with Rounded Corners in Internet Explorer 9?. For more information, please follow other related articles on the PHP Chinese website!