Border-radius on two overlapping elements; background shines through

I've made a CSS progressbar, using 2 overlapping elements. The CSS for the elements is as follows:

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000;
  cursor: pointer;
}
#status_progressbar_progress {
  height: 22px;
  background: #eee;
  float: right;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-开发者_JAVA百科border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
  /* width controlled by Rails backend, using inline style */
}

Unfortunately, the background from the parent is partly visible at the right edge, as you can see clearly in this picture. Since the background from the child element should precisely overlap the parent element, I don't know why this is the case.

[Picture taken in Firefox 4]

Maybe someone could explain to me why this is happening and how to solve it?

This is a known problem. One way around it, is by nesting rounded elements when you need a colored border. Pad the other box with the same amount as the width of the border.

More information can be found in this blog post by @gonchuki: Standards Compliancy is a lie (or, how all browsers have a broken border-radius)

An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).

then:

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000 url("/path/to/image') repeat-y 0 0;
  cursor: pointer;
}

I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.

var prcnt = (YOURPERCENTAGE/100)* 366;

I was able to get a pretty good result by adjusting the CSS Slightly. (DEMO - Tested in Chrome & FF)

#status_progressbar_progress {
    ...
    margin-right:-1px; 
    ...
}

This just nudges the grey div to the right by a pixel. You can even up it to 2 pixels, which I think looks even better. Make sure you compensate for that pixel change in your calculations.

I think this happens because the browser tries to antialias the border and it probably does that by adjusting transparency so your under div is black and top gray so black gets trough. (don't quote me on this but thats atleast what seems logical to me).

Have you tried wrapping both status_progressbar and status_progressbar_progress in another div and give border-radius and overflow:hidden to that div?

You could try changing the border radius on the right hand side up by 1px on the background element. That might make it disappear behind the front