I like rounded corners. It makes life less edgy. Gives some curve to my existence. I started wondering how this could be achieved in the client. In the browser there are tons of techniques to find. I did some research for the client and found a post from Ben Langhinrichs about it.
He used image borders for it, and the results are surprisingly good: Domino rescales the corners in a not-so-bad way!
But I miss some things:
- What about exact corners? You wanted small corners, but they grow bigger if your table gets bigger with this technique.
- What about gradients, often used, but not possible here?
I gave it a second thought, experimented a little and came up with 6 ways to create different types of rounded corners. They’re not really all that different, but depending on what you’re trying to achieve and your graphical skills and tools, you can choose an approach.
Seems good enough for my first Show ‘n Tell Thursday post!
Here are the 6 examples. All of them are demonstrated on the About this database page of a Rounded Corner Demo database.
If you take a look at the design in the database, it’s not so hard to figure out how they work. But here’s a brief explanation for the different types anyway:
- Example 1 uses an image border. Domino scales the image frame dynamically.
- Example 2 has a fixed background image in its cell. Your table has to match the dimensions of the background image exactly.
- Example 3 has a very long background image in the left cell (make it big enough, 1000 pixels or more if you want to scale it dynamically and go really wide). The right cell closes the image with its round corners. Don’t be afraid of file sizes: a file of 1000 pixels widht is only about 5k. Gifs are very good at this. It’s a bit like the sliding doors technique in css. Gradients are possible here.
- Example 4 has images for the left and right side of the rounded rectangle. The middle part is a simple background color for the cell.
- Example 5 is as example 4, but with a tiled background image in the middle. Now we can use gradients here too.
- Example 6 is the most complex and dynamic solution: it uses 4 corner images, a background image to connect the top borders and a background image for the middle section. The lower part takes a solid grey background color.
The last example can have other variants as well, but at least I should have got you inspired by now.
How to create the corners?
I used Fireworks for this. I created the rounded rectangles first, then cut them into pieces and exported the different parts I needed. Also notice that a 1-pixel width background image often will do to fill the middle sections of your table by tiling the image.
Some of these techniques may look like a lot of work, but the truth is: once you created a basic table, you can reuse them all over your application.