How to Fix Border-Radius and Background Gradient Bleeding in IE9?

Fixing Border-Radius and Background Gradient Bleeding in IE9

In Internet Explorer 9, rounded corners and background gradients can be implemented separately using CSS3 border-radius. However, combining these elements often results in gradient bleeding beyond the rounded corners.

To resolve this issue, one workaround involves wrapping the gradient element within a containing div that matches its dimensions and rounded corner values. This essentially creates a mask that confines the gradient within the desired area.

HTML:

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

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 */
}

This approach effectively masks the gradient bleed by clipping it at the boundaries of the rounded corners. However, it's important to note that it may impact interactivity with the underlying gradient content.

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