Well, there are a lot of ways to design rounded corners sites using CSS. But I always missed some that provided a tutorial to draw the borders. So I decided to draw my own using gimp.

I use this layout for my current college page,

First, let’s open a new file in Gimp: File > New…
Choose a width so that it is larger than the width of your page. The height can be like 400px.
In advanced options, change to Fill with: Transparency.

(There was an image here, but Imageshack seems to have lost it)

We now use the “Rectangle Select Tool” (the first icon at the main panel). Check the option “Rounded Corners” and choose a suitable radius, say ‘25.0′, like the image below (nicely marked in red):

Draw a rectangle with the size almost the same as the image, then go to Edit > Fill with FG Color (you can change this color by clicking at the small rectangle just below the icons in the main panel). I used a red FG color to get this:

Next, go to Filters > Light and Shadow > Drop Shadow…
If you want shadow borders in both sides, you have to set offsets to ‘0′. You can play with the other parameters or leave them with default values, just like I did:

Click OK. It was created a shadow around the rectangle. Maybe it’s difficult to see it because of the transparent background, but you can verify it opening the Layers Panel:
Go to Dialogs > Layers (alternatively type Ctrl+L)

We have two layers, one of them named ‘Drop Shadow’ (left image below). Before starting cropping, we shall merge these layers: just right click in the ‘Drop Shadow’ layer and choose ‘Merge Down’. We’ll get the image at the right below:

Now, with the “Rectangle Select tool” (you may uncheck the ‘Rounded Corners’ option), select the bottom of the rectangle (more or less at the height where the corner ends). Copy it and open a new image with transparent background. Its size can be the same of our current image. Paste the selection there:

This will be the bottom of the web site. But as we don’t know the actual size of the site, we need to split up the left and right corners. Using my CSS model, we need the left side to include the border and at the right we just need the corner. So, let’s cut the right corner from this image. Unselect the current image by clicking away from it and again using the ‘Rectangle Select Tool’, select the right corner and cut it. Again, create a new transparent backgrounded image with any sufficiently large size and paste the corner there. Now, let’s correct the size of these images. In both of them go to:
Image > Auto-crop Image…

Save them as “bottom_right.png” and “bottom_left.png” (jpeg format won’t preserve transparency). Well, we have our “bottom_right” and “bottom_left” parts.The process for obtaining the upper parts is the same, but for my CSS tutorial they won’t be necessary. We just need to get the lateral shadows. For this, go back to the rectangle image and select a small part of the left border (just the shadow), like I did below:

Copy it and open in a new image (transparent background as always). Auto-crop it again and save as “top_left.png”. Now, simply go to:
Image > Transform > Rotate 180°
and save the resulting image as “top_right.png”.

Let’s go to the code!
The example I tested the generated borders has the following structure:

HTML code:
http://pastebin.com/f1e91e89f (wordpress won’t let me paste html code here?)


/* CSS Code */

.bottom_left {
background:
url(bottom_left.png)
top left no-repeat;

margin-right: 54px; /* Controls the length of the bottom */
padding-bottom: 30px; /* Parameter */
}
.bottom_right {
height: 30px;
background:
url(bottom_right.png)
top right no-repeat;
margin-right: -55px; /* Controls the distance between the left and right bottom parts */
padding-bottom: 30px; /* Parameter */
}
.top_left {
background:
url(top_left.png)
bottom left;
background-repeat:repeat-y;
}
.top_right {
background:
url(top_right.png)
top right;
background-repeat:repeat-y;
}
.container {
margin: 0 auto;
margin-top: -10px;
width: 900px;
}

.text {
margin-right: 12px; /* Parameter */
margin-left: 12px; /* Parameter */
background-color: green;
padding: 25px;
}

Put all these files and those images in the same directory and test all parameters until you get the desired result. I put a green background on purpose to show where we have the border.

---

Possibly related posts: (automatically generated)

• CSS changes: Rounded corners & Shadows by hansmikk