CODEWITHSUNDEEP
css
seler
seler

Reputation: 9193

rounded corners (border-radius) of image in opera 10.50+

everything works fine in chrome, firefox, etc, even in ie (using pie), but in opera it's not working at all. comarison between opera and chrome: http://dl.dropbox.com/u/5011224/opera-chrome.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
            }
            .test {
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <div><img class="test" src="lena.jpg" width="200" height="200"/></div>
    </body>
</html>

Upvotes: 2

Views: 2907

Answers (2)

Spudley
Spudley

Reputation: 168685

Which version of Firefox are you testing with? This is a leading question, because I suspect you're using FF4, because Firefox 3 had the same problem that you're reporting here with Opera.

The problem is that the image in the <img> tag is being rendered in front of the element's border. This means that although it is doing the rounded corners, you're not seeing them because the image is in front of them.

If you specify border: solid black 1px; as well, you'll get a better visual clue as to what's happening because the border will visibly disappear behind the image at the points where the rounded corners begin.

There isn't a direct fix for this, but there are a couple of work-arounds:

  • Use a wrapper <div> element around the <img>, and put the rounded corners on the <div> instead.

  • Display the image as a background-image instead of a foreground one.

Hope that helps.

Upvotes: 4

Dave
Dave

Reputation: 29121

It seems like overkill, but have you tried rounding the image's container div and setting it to overflow: hidden? (I don't have Opera, or I'd test it myself)

Upvotes: 1

Related Questions