Rounded CSS Corners

By on July 27, 2004

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.



  1. 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.

Comments are closed. If you have something you really want to say, tweet @gadgetopia.