Jul 27

Rounded CSS Corners

In a perfect world, you’d never put anything in your HTML that defines the presentation of your page. You’d only use HTML for content, and allow the stylesheet to define the presentation. One of my few gripes with CSS is the inability to create a box with rounded corners. In general, CSS is pretty weak when it comes to defining custom borders. (How many drop shadow techniques could we kill if CSS allowed border images?).

I ran across several good examples today here and here of ways to make divs with rounded corners, although these same techniques could really be used to create whatever sort of custom border you like. Good articles to stick under the ol’ developer hat for later.

by Joe   July 27, 2004 2:23 PM   |

Comments

by Simon Willison,   July 27, 2004 3:34 PM  

I wrote an article about this exact topic a few months ago, which examined the most common techniques and introduced a new one using JavaScript: http://www.sitepoint.com/article/rounded-corners-css-javascript

by Raefer Gabriel,   October 13, 2004 7:06 PM  

Here's another technique, based on Simon's and some others, with the new addition of using a PHP script URL in the CSS to generate the images (this doesn't use the Javascript trick, but could easily work with Simon's Javascript trick if you wanted it to). It also allows for arbitrary nested div tags, and is definitely the most maintainable rounded border technique I know of since it requires absolutely no hacking and slashing of images to implement (well, CSS3's border-radius would be better, but it doesn't exist yet, and -moz-border-radius produces rather ugly results and is Mozilla-specific). The PHP script will generate circular or elliptical border images of varying inner and outer colors, like the border-radius tag, and with some modification could probably support other border style variants too.

by Raefer Gabriel,   October 19, 2004 2:04 AM  

Oops, my link didn't show up before:

http://hardgrok.org/blog/item/20/

Add Comment

Want to advertise on this site? Contact FM.
Laser Toner Cartridges UK laser toner, toner cartridges, hp toner, lexmark toner, samsung toner, canon, toner, epson toner, oki toner, kyocera toner, xerox toner, remanufactured toner, compatible toner
Direct TV Deals Free 4 room direct tv deals. no equipment to buy. free fast professional direct tv installation. this is the best direct tv deal available anywhere.
SEO Article Learn from the experts with our SEO article.
rope light Shopping with birddog distributing, inc., gives you access to the lowest prices, the best customer service and the quickest delivery times possible.
Laptop AC Adapter We offer genuine factory direct replacement AC adapters.
Direct TV Best satellite TV deals.
Direct TV Deals Direct TV programming deals are varied and include packages containing from 50 channels up to over 250 channels.
8mm film to DVD Retain family memories with the only frame by frame digital restoration service in the United States for your 8mm film to DVD today
Rubber Stamp Shop for custom self-inking stamps, hand stamps, address stamps, label stamps, check endorsement stamps, check deposit stamps, date stamps, pre inks, pocket stamps, ink and much more!