How to Prevent Background Gradient Bleed in IE9 When Using Border-Radius?

IE9's Border-Radius and Background Gradient Bleed: A Conundrum

IE9's support for border-radius using the CSS3 standard is widely known. However, when these rounded corners are combined with a background gradient, an unexpected issue arises: the gradient bleeds beyond the curved edges.

Solution: Employing a Masking Technique

One workaround involves using an additional div to act as a mask. Here's how to implement it:

1. Add a Masking Div: Wrap the element with both rounded corners and gradient in a new div.
2. Set Div Attributes: Give the masking div the same height, width, and border-radius values as the inner element.
3. Hide Overflow: Set the overflow property of the masking div to hidden.

This creates a mask that conceals the gradient bleed, while allowing the rounded corners to remain intact.

HTML and CSS Code:

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

By utilizing this masking technique, you can overcome the gradient bleed issue and achieve the desired effect in IE9.

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