border-radius + overflow:hidden = thin black line

Question

here is my issue:

<div class="wrap">
    <div class="inner"></div>
</div>

.wrap {
    position: relative;
    width: 200px; 
    height: 66px;
    background: black;
    overflow: hidden;
    border-radius: 100px;
}

.inner {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    background: white;
}

http://jsfiddle.net/cjW7Q/1/

Notice thin black line on the right side. Any ideas how to get rid of it?

UPDATE

There is a lot of workarounds, but problem is that overflow:hidden doesn't work correctly. Imagine that instead of .inner I have an image, that I want to move around with transition using transform (for hardware acceleration). I'll try to update demo later.

Answer 1

<edit>multiple bg mixing image and gradient can be used with animation too without extra markup DEMO </edit>

---

This is a commun defaut , you see it in FF too.

I would say , paint it the other way round : .wrap doesn't even need a bckground color. http://jsfiddle.net/cjW7Q/2/

.wrap {
    position: relative;
    width: 200px; 
    height: 66px;
    overflow: hidden;
    border-radius: 100px;
}

.inner {
    position: absolute;
    top: 0;
    width: 50%;
    left:0;
    bottom: 0;
    background: black;
}

---

Else you can use a gradient and no inner element:

.wrap {
    position: relative;
    width: 200px; 
    height: 66px;
    overflow: hidden;
    border-radius: 100px;
    background:linear-gradient(to left,white 50%,black 50%);
}

DEMO