Rounded Corners – Solution 1

Rounded corners on websites and in webdesign are fairly popular. I think that the move from traditional square and technical design to a more organic design is part of the popular trend now a days. A device (or website) that breaks the expected pattern forces us to make new associations with the device. iPods are a great example i think were curved surfaces and smooth design is important but somehow appeals more to most people.

Regardless of the reason of rounded corners and curves, they are popular but can be a pain to make. Though it has gotten increasingly easier to create and the next CSS3 even provides support for easily creating rounded corners 🙂

Here is method number 1 for making rounded corners, and in the following posts i will be providing several other ways of making this effect.

Making corners in Photoshop

First off we need to make the four corners in a graphics editor such as Photoshop. Which editor you use is of no consequence, but the end result should be 4 images, one for each corner.

First create a new image about 50 x 50 pixels. Size depends on the curve you want.
Then make a circle selection on the whole image and fill with your foreground color.
Using the ‘guides’ in photoshop slice the image into 4 seperate corners.
Finally save each corner to its own file.

Note that you can create the corners in several ways and this is just a simple way to do it. How you get your corner graphics does not affect the rest of the tutorial.

Now that we have our corner graphics we can create a simple html table that includes the graphics and places them were we need it 🙂

HTML Template with rounded corner graphics

What we need here is a simple 3 x 3 table, with corner graphics in each corner cell, and leaving the middle cell for content. We can also insert a title for the rounded corner box in the first row, second cell (between the corners).

Here is sample html that does exactly this:

<html>
    <head>
        <title>Rounded Corners Solution 1</title>
    </head>
    <body bgcolor="#47444f">
        <table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6af2">
            <tr>
                <td width="25"><img src="ltop.jpg" width="25" height="25"></td>
                <td><!-- Insert optional headline here --></td>
                <td width="25"><img src="rtop.jpg" width="25" height="25"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
                Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
                Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
                </td>
                <td></td>
            </tr>
            <tr>
                <td width="25"><img src="lbottom.jpg" width="25" height="25"></td>
                <td></td>
                <td width="25"><img src="rbottom.jpg" width="25" height="25"></td>
            </tr>
        </table>
    </body>
</html>

Rendered result looks like this:

Example files to download:

[download#11#image]

Rounded Corners – Solution 1

Comments

Leave a Reply Cancel reply