Deprecated: Assigning the return value of new by reference is deprecated in /home/desandie/www/blog/wp-includes/cache.php on line 36

Deprecated: Assigning the return value of new by reference is deprecated in /home/desandie/www/blog/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/desandie/www/blog/wp-includes/theme.php on line 507

Warning: Cannot modify header information - headers already sent by (output started at /home/desandie/www/blog/wp-includes/cache.php:36) in /home/desandie/www/blog/wp-content/plugins/BAStats/BAStats_logger.php on line 99
China Musings » Roundrect CSS

China Musings

Writings and Ramblings (A/V) from Guangzhou, China

Roundrect CSS

Filed under: Web Development — Adeh at 1:42 pm on Thursday, June 9, 2005

Found a really cool rounded rect CSS stylesheet while hacking together the backstreet site. It is really simple, and while it doesn’t work perfectly (had to do some 1 px tweaking in both Firefox and IE), it works pretty well. Link. OK, can’t find the link. You all are on your own!

No, OK, I’ll explain. Basically, you make a single rounded rect gif or png in GIMP (Photoshop if you must). Calculate exactly the dimensions of the curve, be it a 5, 10, or 25 pixel square. Then, we make 6 divs, one div encloses all the elements. Then we have four divs, one for each corner. Finally, we have a div on the inside for the content. The main div’s background color should match the color of the rounded rect image. Then, the same full rectangle image is used a a background image for all four corner divs. The trick is to use CSS to position the background image so that only the appropriate corner is showing. Finally, put the content in the content div and viola! we have a nice rounded rect content box for any site.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> <img src="">