Home/ Questions/Q 4595794
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T23:01:22+00:00

everything works fine in chrome, firefox, etc, even in ie (using pie), but in

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0