CSS Tips and Tricks – CSS Only Rounded Corners (no images used)
March 28, 2010
As a web developer one of my prime responsibilities is making sure our designs and code work throughout most major internet browsers. This to me always seemed like such the daunting task and sometimes, it still is. I’ve moved from full table designs to the wonderful table-less designs created through CSS. I was slow to come around but when I did, things just seemed to get cleaner and easier.
Most days have me building some simple yet effective CSS code that holds up well in IE 6, 7, 8 as well as Firefox 2 and 3. I find that if the above browsers display my webpage correctly then the other lesser used browsers usually follow suit. Obviously, at least me, is the inherently difficulty with getting Internet Explorer 6 to cooperate in certain areas, but alas…we web developers have a way of getting these things to work.
So, over the coming months I shall write some brief tutorials or point to some key sites containing some solid and useful CSS tips and tricks that work well in the major browsers. If you like what you see then you’ll be able to download the code yourself and try out some of these handy CSS methods.
Rounded Corners – CSS Only, No Images
There are many tutorials out there for learning to create rounded corners. A lot of those use JavaScript and images to do this. While this is a great way to create some smooth rounded corners I wanted a way to do it with just CSS.
In my research I stumbled upon SpiffyCorners.com and started playing around with the code. It’s so simple and very easy to implement. The folks at SpiffyCorners.com have also added a color picker that actually updates the CSS code for you so you can copy and paste right into your site.
Taking their basic code I found that it would be relatively easy to build a simple layout as an example use of the code.
You can see the Example Page.
The page was tested using Litmus.com and you can view the published results.
To download the example above along with the CSS, please download it below. All credit should go to SpiffyCorners.com.
