Shaun Mccran

My digital playground


CSS 3 rounded corners - Background tip

Recently I noticed a CSS issue with CSS 3 rounded corners. There are a few instances where the order of your CSS is critical to the display layer. This article deals with rounded corners and background colours.

The background colour must always be assigned to the very first CSS rule. This is because each CSS background rule is essentially a layer on top of the previous one.

A background colour by default covers the entire div and will layer on top of any other previously assigned background images and/or colours. Therefore, if we place a colour in any div other than the first it will be placed on top of the preceding div's and will essentially cause them to disappear. Therefore, we must place any background colour in the very first CSS rule.

Below are screenshots of both versions, using the same code, just in a different order.

Bad corners:

Good corners:

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Back to top