border-radius + overflow:hidden = thin black line - html

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

Answer 2

Here's a Work Around
.inner {
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
background: black;
}
Apply the same background of it's parent for the parent element (here there's no need of background at all)

Answer 3

Add "border-right-width: 0px;" to .wrap.

Answer 4

Try this CSS,
.wrap {
position: relative;
width: 200px;
height: 66px;
background: black;
overflow: hidden;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.inner {
position: absolute;
top: 0;
right: 0;
left: 50%;
bottom: 0;
background: white;
}
DEMO

Answer 5

border:0px
paddind : 10 px
background:#FFF