Shaun Mccran

My digital playground

06
J
A
N
2011

CSS 3 rounded corners - Background tip

Posted By : Shaun McCran
Related Categories: CSS
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 Comments (0) | Send Send | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs |
Answer Questions
TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

There are no comments for this entry.

[Add Comment] [Subscribe to Comments]
Back to top
Subscribe
Enter your email address to subscribe to this blog.


Associated links