DevPaper.NET

Today’s lesson is focusing on the current way to implement rounded corners, as part of your site’s design. Some designers use them on small elements, while others use them for the entire site’s layout. CSS 3 (sometimes referred to as CSS 5,) as part of HTML5, will be introducing rounded corners as a standard command (See my post, Rounding Corners with CSS 3), eliminating the need to use graphics to produce them. Until then, web designers and programmers are forced to keep Photoshop handy.

Creating the Graphics

That’s right, we have to create the graphics for our rounded corners. We don’t have the luxury of just programming a rounded corner. (Well, that is, until CSS 3 comes out as an industry standard.)

First of all, let’s fire up Photoshop and create a new document that’s 100px x 100px.

There are several ways to create your corners, but I personally like to create a faux box and cut out the corners individually. My main reason for this is because there’s always the possibility that I want a custom graphic in the background, so this gives me the most flexibility.

On the left-hand side, select the color you want to use (I happen to really like #006CFF) and then select your Rounded Rectangle Tool. By default, this is your Rectangle Tool. You’ll need the rounded version to be able to accomplish this.

At the top of your screen, set the Radius to the size that you want your corners to be. Since I’m doing a small table, I only wanted 5px. Keep in mind that this number is going to be very important very soon. Don’t forget the size you chose.

Within your white drawing area, just drag your mouse and create your rounded rectangle. Press the Return key to accept your new shape.

Notice that I didn’t create my shape all the way out to the side. This is because, in order to make this shape properly, Photoshop creates some light-colored pixels, which we can’t risk chopping off.

For this next part, you will want to zoom in to make your drawing area the size of the screen. You can accomplish this by pressing Z and selecting Fit Screen from the top bar.

From your toolbox, select the Slice Tool. By default, this will be your Crop Tool

Now all you have to do is drag it around the corners and select what your corners will be.

Tips

• If you’ve created a new box and find that you made a previous box too large or too small, right-click on it and you will get your resizing box back
• Pay attention to the lines that are created by this tool, because your corners need to be exactly the same size

Now that you’ve created your boxes, you need to clean them up a bit! Zoom in even more (press Z on your keyboard) to each individual corner and make sure that the boxes are equal in height and width to the radius that you set in the beginning. This is why I said it was important to remember.

Since my radius was only 5px, I’ll count 5 pixels up and 5 pixels down

After you have created these, you can zoom back out to either Actual Pixels or Fit Screen.

So now we have our corners! All that’s left is to create the images for use. To do this, go to the File Menu and select Save for Web & Devices.

You will be greeted with a new screen that shows all of the slices that you have created.

On the right-hand side of this dialog, you can select the format to save your images in. I personally prefer to use PNG-24, as it’s a lightweight format and has the quality of .JPG (even though in this particular example, it’s not as relevant) and allows transparency, like .GIF images. Just keep in mind that, by default, Photoshop will create all images with the GIF setting, so you will have to go to each individual slice and change the type of image that it saves as.

If you want to rename your slices, go ahead and zoom in on them and double-click with the Slice Select Tool. I won’t get into detail of what’s here, so feel free to explore!

All you have to do now is press Save and tell Photoshop where to put your images.

NOTE: If you use the default settings, you will get an image created for every single slice on the file. If you only want the corners, select All User Slices from the Slices section at the very bottom.

After you’ve saved this, you can navigate over to the folder that you saved your images in and rename them, if you feel so inclined.

Writing Your HTML

The HTML is fairly straight-forward, but understanding why you’re doing it is the important part. This is how your code will be formatted:

  <div class="container">

    <div class="corner top-left">
      <div class="corner top-right"></div>
    </div>

    <div class="content">
      Finally!  Rounded Corners!
    </div>

    <div class="corner bottom-left">
      <div class="corner bottom-right"></div>
    </div>

  </div>

Surrounding your block is a “container” div. This holds it all together for us and will ultimately be used to dictate the size and hold our background color (or image.)

  <div class="container">

Inside of our “container” div, we have three “sub-containers”. The first holds our two top corners, the second holds our content and the third holds our bottom corners.

    <div class="corner top-left">
      <div class="corner top-right"></div>
    </div>

    <div class="content">
      Finally!  Rounded Corners!
    </div>

    <div class="corner bottom-left">
      <div class="corner bottom-right"></div>
    </div>

Why do we need our corners to be contained within each other?

This was done so that we don’t have to worry about “floating” our divs. It gets very messy and doesn’t transfer over between browsers very well. Just think of this as a little “cheat” in order to guarantee that we are cross-browser compatible.

Putting it All Together with CSS

Finally, we just have to create the CSS that will put it all together for us. I’m a little anal about how I write my CSS and I even require my programmers to practice writing the same way that I do, so that will explain why my corner divs inherit from the corner class before it inherits from its own.

  <style type="text/css">
    .container
    {
      background-color:#006CFF;
      margin:0px;
      padding:0px;
      vertical-align:top;
      width:300px;
    }

    .container .bottom-left
    {
      background:url('bottomleft.png') no-repeat left;
    }

    .container .bottom-right
    {
      background:url('bottomright.png') no-repeat right;
    }

    .container .content
    {
      padding:10px;
    }

    .container .corner
    {
      font-size:0px;
      height:5px;
      width:100%;
    }

    .container .top-left
    {
      background:url('topleft.png') no-repeat left;
    }

    .container .top-right
    {
      background:url('topright.png') no-repeat right;
    }
  </style>

The Breakdown

    .container
    {
      background-color:#006CFF;
      margin:0px;
      padding:0px;
      vertical-align:top;
      width:300px;
    }

In our “container” wrapper, we are setting the background for the entire class, ensuring that margins and padding don’t accidentally increase the size of our box and also defining the width to be 300px. The only line in here that may be optional is the vertical-align property. I like to set this to be safe, but if you find that it’s meaningless, go ahead and remove it.

    .container .corner
    {
      font-size:0px;
      height:5px;
      width:100%;
    }

This just defines the global properties for all of our corners. Remember when I said that I was a little anal about my code? Well, I don’t want to have to type these into each corner’s block of CSS. We have to set the height to match the radius that we set in Photoshop (this is mainly for FireFox compatibility.) The width should be 100% (not exactly required, but it helps to ensure that future implementations still display our design.) The font-size should be set to 0px (Internet Explorer will take the font size over the height, even though we don’t have anything inside of our block.)

    .container .top-right
    {
      background:url('topright.png') no-repeat right;
    }

Each of our corners will have their own individual image. We have to set the no-repeat property on here, or else you will see your image multiplied across the entire div. You also have to specify whether this image was meant for the left or the right. By default, your image will be set to left, but I like to set them all manually, just to ensure that future CSS implementations don’t break my design.

Once everything has been set up, we wind up with the following on our website:

This method has been tested in Internet Explorer 7 and 8, Firefox 3.6 and Google Chrome 6.0.

As always, if you have any questions or concerns, please don’t hesitate to leave a comment below.

~Derek Torrence