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:

1. {
2. background-color: #BD8B00;
3. border: 3px solid #990000;
4. width: 200px;
5. height: 200px;
6. -moz-border-radius: 100px;
7. }

should produce a perfectly circular DIV here: Read the rest of this entry »