How to Prevent Background Gradient Bleeding in Rounded Corners in IE9?

IE9 borderRadius and Background Gradient Bleeding: A Solution Unveiled

In the world of web development, IE9's support for border-radius has been a welcome addition. Yet, when combined with background gradients, an unexpected issue arises: gradient bleeding outside the rounded corners.

To address this problem, a clever solution emerges: creating a parent div that masks the inner content. This mask div, with the same size, rounded corners, and hidden overflow, acts as a barrier, preventing the gradient from spilling over the edges.

By utilizing the following HTML and CSS, you can implement this workaround:

<code class="html"><div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div></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>

This workaround effectively addresses the bleeding issue, providing a streamlined user experience without diminishing the visual appeal of rounded corners and background gradients.

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