bnabound

@wpyogi – Thanks for trying but if you read the full description of my first post you will notice I mentioned I was already using Firebug and was still tearing my hair out.

Either way after 5 hours I’ve finally figured it out. For anyone that might come across the same problem:

The reason the red was showing even behind the rounded corners, is because the #primary background color was set to red AND the #page background color was also set to red. The parameter in #page covers the entire area, whereas the one in #primary only covers the actual space of the post/page. Once the two background-color parameters are set to the correct colors, the result looks just like I’ve wanted it to look like (see here with proper colors!)

solution screenshot

To make it look like the above screenshot, I now have the following code:

#primary {
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		background-color: #FFFFFF;
}

and

#page {
    background-color: #3C4659;
}

Hope this helps someone save 5 hours of frustrations!

Thanks for that Andrew, I will trawl through that forum as well.

However I don’t see how this is not a WordPress question since it’s part of the Twenty Eleven theme! There are so many queries here about very similar problems, I don’t think mine is any different.

Just in case there’s any doubt, I need to understand how to differentiate between the background behind the rounded corners and the actual post (within the rounded corners). Which code in the theme is responsible for that?

If anyone else could have a look at my problem and make any suggestions, I’d very much appreciate it!