Creating rounded corners boxes proves a fairly difficult challenge. While there are numerous elegant solutions to this problem for the purposes of the design proposed for ACS.org Release 2, none of these solutions was ideal.
Both spiffy corners and nifty corners are great solutions. However, I needed to consider what might happen when user added alot of boxes to a page. How would these JavaScript heavy solutions perform? Also there is the issue of users who have disabled JavaScript in their browsers. I wanted a solution which could swing both ways. A solution which could be created using CSS only or be applied with JavaScript. Finally, I want rounded corners for a designer. I wanted a solution which could be custom themed one in which the corners could all be different, so of course this means using images for the borders and the corners.
Custom Corners Demonstration
A few notes…
First I’ll be updating this post soon with some graphics and instruction, but for now just go here
Custom Corners Demonstration.
Also, I ran across this post from 465 Berea St Transparent custom corners and borders, version 2
Anyhow, that technique seems very close to my own. I’ll update this post with the differences once I’ve had a chance to see how my technique differs from Roger’s.











