css - CSS: Overlapping elements with rounded corners

Question

No problem to get the rounded corners but how can I get them to overlap though so that I can see through?

Current code:

nav li{
   height: 50px;
   line-height: 50px;
   background: #ccc;
   float:left;
   width: 192px;
   text-align:center;
   border-bottom-right-radius: 25px 25px;
}

Answer 1

Not sure if you're asking for opacity, or asking how to achieve the look in that image with an overlay, so I'll address both..

Opacity

Set this on the classes for the buttons.

opacity:0.5;
filter:alpha(opacity=50);

This will make the boxes 50% transparent, although you can edit how much by editing the two 5's above to any other number.

Overlay

Give the classes for the buttons a negative left margin. This will make them look like they do in the image you posted (assuming that's what you want, and not what you already have). Change the -10 to any other number to suit your needs on the spacing of them (trial and error to test the spacing).

margin-left: -10px;