CSS overflow:hidden inside circles

Question

I'm trying to hide the overflow of a circular div. Its child div is hidden from view when outside the container area (good), but remains visible when only outside the radius area (bad)

.outer{
    position:relative;
    border-radius: 50%;               
    width: 200px;
    height: 200px;
    background:#dedede;
    overflow: hidden;
}
.inner{
    position: absolute;
    top:150px;
    left:150px;
    width: 50px;
    height: 50px;
    background-color: red;
    background:#98de45;
}

Overall I'd like to achieve the effect at http://buildinternet.com/project/mosaic/1.0 but using circles - is there a way to do this?

Fiddle: http://jsfiddle.net/a9Feu/

Edit: This works fine in Firefox and IE 10, but not Chrome or Safari

It works fine in IE 10 - update your question with details of the browser you are using — web_bod, May 21 '12 at 22:35
Possibly related to http://stackoverflow.com/questions/10616668/how-to-hide-canvas-content-from-parent-rounded-corners-in-any-webkit-for-mac — Nathan Ryan, May 21 '12 at 22:38
@user1284316: I think it's classified as a bug. So, there's probably not a straightforward workaround. I don't know of one, sorry. — Nathan Ryan, May 22 '12 at 07:44

score 5 · Answer 1 · answered May 21 '12 at 22:38

5

Like this?

.outer{
    position:static;
    border-radius: 50%;               
    width: 200px;
    height: 200px;
    background:#dedede;
    overflow: hidden;
}
.inner{
    position: static;
    top:150px;
    left:150px;
    width: 50px;
    height: 50px;
    background-color: red;
    background:#98de45;
}

answered May 21 '12 at 22:38

Répás

1,812
7
28
54

Interesting that the positioning is what causes it to not work. If I were you, however, I would edit your solution to change the `top` and `left` properties in `.inner` to be `margin-top` and `margin-left` so that the square gets positioned correctly. Whether going to a static element is an option for the OP is a whole other issue. – ScottS May 22 '12 at 02:08
Then you should use HTML canvas instead of css. I've found something about it, give me some time to find it again. – Répás May 22 '12 at 07:49
continuing ScottS though... what if I need to use absolute position? – Blue Bot Dec 13 '17 at 09:53

score 0 · Answer 2 · answered May 22 '12 at 06:31

I hope this should work

http://jsfiddle.net/a9Feu/35/

.inner{
    position: absolute;
    **border-bottom-right-radius: 100% 110%;**
    top:150px;
    left:150px;
    width: 38px;
    height: 35px;
    background-color: red;
    background:#98de45;
}

CSS overflow:hidden inside circles

2 Answers2