As previous years Reflection Design strips down in honor of CSS Naked day :p
What happened to the design?
To know more about why styles are disabled on this website visit the
Annual CSS Naked Day website for more information.
For this 'tutorial' i decided to simply link to a nifty page with instruction on creating a box with rounded corners without using images.
So head on over to Nifty Corners Cube by Alessandro Fulciniti and find a new method to produce those lovely rounded corners.
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.
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:
Rendered result looks like this:
Example files to download: