Border-radius on two overlapping elements; background shines through

Question

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-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]

Problem

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

Ian Wood Ian Wood · Accepted Answer · 2011-03-30T11:53:08

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;

Border-radius on two overlapping elements; background shines through

5 Answers