Take the 2-minute tour ×

enter image description here

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;
   width: 192px;
   border-bottom-right-radius: 25px 25px;
share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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


Set this on the classes for the buttons.


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


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;
share|improve this answer
Thanks, also I actually tried the negative margins but failed to realise i needed to float them all right instead of left for the overlap to work. –  Quad6 Jul 20 '13 at 5:28
add comment

Your Answer


