How to Make Css3 Rounded Corners Hide Overflow in Chrome/Opera

How to make CSS3 rounded corners hide overflow in Chrome/Opera

Nevermind everyone, I managed to solve the problem by adding an additional div between the wrapper and box.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

Thanks everyone who helped!

→ http://jsfiddle.net/5fwjp/

CSS3 border radius problem with Chrome, Opera, Safari

Check this fiddle in various browsers:

http://jsfiddle.net/QVS9X/

When you remove border-radius, everything goes back to normal. You may have discovered a bug in Webkit and Opera implementations of border-radius. Check if it hasn't been reported and if not, you might want to report it :).

[EDIT]

I'm quite certain this is a bug.

1. It only manifests itself in Chrome & Opera
2. The bug looks different in Chrome and Opera
3. The buggy part is related only to the width of the border that exceeds the value of border-radius (ie, for border-radius:10px and border width 10px, it's fine)
4. The correctly rendered part is as wide as the value of border-radius.

I'm positive it should be reported to both the Opera and Webkit teams.

Safari rounded corners fail to conceal with overflow hidden during animation

Change the thumb_overlay width to 153px, and add webkit definitions for border-bottom-left-radius and border-bottom-right-radius.

-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;

Fiddle.

position:absolute within border-radius and overflow:hidden

That is a problem for now I think. May I suggest you use fadeIn() Instead. See a demo

Webkit overflow issue on border-radius and transform

Ok, found the solution on How to make CSS3 rounded corners hide overflow in Chrome/Opera

Looks like a bug in webkit.
The only thing is that you need to add this in the wrapper div. In my case .circle.

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

---

Related Topics