So I’ve been battling with an implementation of rounded corners that used a div around another div, utilizing the :before and :after pseudo elements to insert two of the rounded corners, then the backgrounds fill out the other two corners. This really turned out to be a fantasy as it utilized the !important hack, and the box could only expand with the content inside of it because of the way the :after pseudo element works. In the end your doing of lot of heavy lifting to produce something with a lot of problems.
But… what if I could give you a class, that would add a rounded border to any element you desire in Mozilla, while degrading to a box with square corners in every other browser, while needing no images and no extra HTML?
Well thats been a reality for quite some time thanks to the Mozilla proprietary CSS properties.
/* The Magic */
/* For CSS3 */
/* Box Styling */
border: 1px solid #333;
Here is what you get for the following HTML
For everyone else
If you examine the class, you’ll see easy rounded corners are coming in CSS3. You may also notice the boxes are different sizes, but this is because there is a 10px padding added to the element and the box model for IE says that the 200 height accounts for he padding, where as Mozilla adds the extra 20px’s (10 for top and 10 for bottom) to the height making the box 220px high.
Now we do have the slight problem that this only shows rounded corners for Mozilla, which is one of the smaller percentages of browsers, yet in regards to my situation at eProject, we only are particularly supporting Mozilla and IE. Even then, the ease of this implementation is certainly worth the trade-off that IE people don’t get the softness of rounded corners.7 comments