开发者

CSS3 rounded image corners not working in Safari/Chrome?

开发者 https://www.devze.com 2023-03-08 14:49 出处:网络
I\'ve merrily hacking away at this websit开发者_StackOverflowe, testing it in Firefox and Internet Explorer 9, taking for granted that Safari and Chrome will render my CSS3 fine, when I\'ve just disco

I've merrily hacking away at this websit开发者_StackOverflowe, testing it in Firefox and Internet Explorer 9, taking for granted that Safari and Chrome will render my CSS3 fine, when I've just discovered they don't.

In FF and IE9 I see this:

CSS3 rounded image corners not working in Safari/Chrome?

In Safari/Chrome I see this:

CSS3 rounded image corners not working in Safari/Chrome?

Here's the HTML:

<div class="container">
    <div>
        <img src="static/images/image1.jpg" alt="" />
    </div>

Here's the CSS:

  .container {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
  }

What am I doing wrong? :(

UPDATE

Please see a working example of the problem I'm having: http://jsfiddle.net/jAsnU/3 Thanks.


try:

.container img {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
}


Try adding "overflow:hidden;" to the style of the div. I made a quick test page up at jsfiddle and it seemed to work (tested it in Chrome, Safari and FireFox): http://jsfiddle.net/wabw8/


You might want to try to set the border radius on .container div img.


I think you need to specify a border.

So, something like this:

border:1px solid blue; //whatever blue you are using.

It looks as though FF and IE are giving you the rounded border... but as a blank item that is cutting off the image.

0

精彩评论

暂无评论...
验证码 换一张
取 消