Looking through some coupons for my local grocery store I saw what hit my web developer’s eye as a circular DIV and I wondered if I could create it in HTML/CSS. I realized that it would make sense to make a square DIV (equal width and height) with a border radius set to half of what the value is for the width and height which would then turn each complete corner of the square into a curve and four curves would meet up and form a perfect circle. Even then I imagined I might have to go through a couple hours of fine-tuning to perfect it, if it was even going to work at all, but it turned out to work perfectly right away, with the usual caveat that it only works in browsers that support the border-radius property, or some proprietary variant thereof (i.e., not IE).
For those readers viewing this on a browser with decent CSS support the following style rules:
- {
- background-color: #BD8B00;
- border: 3px solid #990000;
- width: 200px;
- height: 200px;
- -moz-border-radius: 100px;
- }
should produce a perfectly circular DIV here:
Current Drawbacks
Border Style Restrictions
Unfortunately it appears that the only border-style type a circular DIV can properly show is “solid.” I have tried other values and they all produced funny results or end up looking as though they were just set to “solid” anyway:
Dotted
Dashed
Groove
Padding Issues
When you place elements within your circular DIV they behave as though it was rectangular:
The quick brown fox jumped over the lazy dog.
Of course that happens when any amount of radius is applied to a DIV’s border and the problem is solved by properly applying padding:
The quick brown fox jumped over the lazy dog.
Rotate It!
Why not have a little fun by applying the transform property?:
The quick brown fox jumped over the lazy dog.
What About IE?
While I recognize the improvements in CSS support that came to versions 7 and 8 of Microsoft’s Internet Explorer it’s sad to say that circular DIVs (in my testing so far) have not worked in any version of IE even with the aid of jQuery Rounded Corners or jQuery Canvas Rounded Corners or jQuery Curvy Corners. Alas, we await support hopefully no later than IE 9. I have had some success with several potential jQuery solutions but no reliable cross-browser solution as of yet.
Post Script
After I wrote this entry I found this article that also has a round DIV in it, but also has IE troubles, even with IE8.
