rounded corners not inherited in webkit browsers

Question

I'm working on some sort of online indesign editor and i ran into the following problem. I'm placing divs on my page with a absolute position, and in that div i place a image, also with a absolute position, because i want to be able to drag the image around inside the div. I'm setting a border radius on the div but the image doesnt inherit that radius.

When i remove the position:absolute property on the div and on the image, the border radius gets accepted. But i need them to be positioned absolute.

You can find an example on jsFiddle

As you can see, its doing it right on firefox but not on chrome and safari. Any help would be appreciated.

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

demo on dablet.com

border-radius is not inherited because of position: absolute; on img

CSS:

.pageelement {
    top:136.583px;
    left:-7.087px;
    height:288.142px;
    width:574.417px;
    position: absolute;
}

.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position: absolute;
}

.pageelement,
.pageelement img {
    -webkit-border-radius: 0px 12px 12px 0px;
            border-radius: 0px 12px 12px 0px;
}

PS. if you not supporting Firefox 3.6, you don't need -moz- prefix for border-radius anymore

Accordingly to this answered question this behaviour is a bug:

“Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.”

Only way to do it is to set image as a background-image of the element with border-radius and positioned it with background-position. via Chris Coyier from css-tricks discussion thread

edited May 23 '17 at 11:59

Community

1
1

answered Jun 13 '12 at 07:51

Vladimir Starkov

19,264
8
60
114

Unfortunatly that didnt work, your not using the overflow hidden property, which i need to hide the parts of my image thet are outside of the div boundaries – vincent Jun 13 '12 at 07:55
1

Firstly, it works ([image](http://img803.imageshack.us/img803/7276/99f2cbac474e419f92c6c26.png)), Secondly, with `overflow: hidden;` you hide not only other parts of image but also rounded corners of it. I think you must to restructure you markup or reformulate your question. – Vladimir Starkov Jun 13 '12 at 08:05
I know what you mean, but strangely enough it works on firefox. So i gues it's more likely a chrome bug. – vincent Jun 13 '12 at 09:00
@vincent seems to me it is a webkit bug, I added some reference to my answer – Vladimir Starkov Jun 13 '12 at 09:41
I found another way in using `background-image` instead of using `image` tag – Vladimir Starkov Jun 13 '12 at 09:46

score 1 · Answer 2 · answered Jun 13 '12 at 09:24

Hi you can get your desired results through define the z-index property in your class .pageelement img

I hope this will help you........

HTML

<div class="pageelement">
   <img src="http://placehold.it/350x150">
</div>

CSS

.pageelement {
    top:136.583px;
    left:-7.087px;
    height: 288px;
    width: 593px;
    position:absolute;
    overflow: hidden;
    -webkit-border-radius: 0px 12px 12px 0px;
    -moz-border-radius: 0px 12px 12px 0px;
    border-radius: 0px 12px 12px 0px;
    border:5px solid red;
}
.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position:absolute;
    z-index:-10;

}

see the demo:- http://jsfiddle.net/hTVFR/21/

madeye · Answer 3 · 2012-06-13T09:27:45.013

0

.pageelement {
    top:136.583px;
    left:-7.087px;
    height:288.142px;
    width:574.417px;
    overflow: hidden;
    position: relative;
}
.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position: absolute;
}

.pageelement, .pageelement img {
    -webkit-border-radius: 0px 12px 12px 0px;
    -moz-border-radius: 0px 12px 12px 0px;
    border-radius: 0px 12px 12px 0px;        
}

Unfortunately pageelement's position absolute is the reason for your troubles. Removing it should make this work!

http://jsfiddle.net/hTVFR/3/

edited Jun 13 '12 at 09:27

answered Jun 13 '12 at 08:16

madeye

1,398
3
15
33

You don't have overflow hidden which is as vincent stated, very important to his layout and .pageelement in my code is not absolute positioned! – madeye Jun 13 '12 at 09:00

rounded corners not inherited in webkit browsers

3 Answers3

demo on dablet.com