CODEWITHSUNDEEP
internet-explorercss
George
George

Reputation: 1032

How do I fix IE broken corners when using border radius (ridge)

I am styling a div with the following:

border: ridge 5px #EEEEEE;
border-radius: 10px;

In IE the top of the ridge breaks in the upper right and lower left corners.

ie broken border

It looks fine in Firefox. Safari shows a similar break. How do I fix or work around this?

Upvotes: 1

Views: 397

Answers (1)

Matthew R.
Matthew R.

Reputation: 4350

I have seen this before. What I ended up doing was a faux ridge. It requires more markup but it does work. Here is the fiddle: http://jsfiddle.net/mt2yA/4/

HTML

<div class="ridge-outer">
    <div class="ridge-inner">
        Content
    </div>
</div>

CSS

.ridge-outer {
    border: 2px solid #eee;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.ridge-inner {
    border: 2px solid #999;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    height: 200px;
    padding: 20px;
}

Upvotes: 2

Related Questions