Articles & Tutorials

The articles and tutorials here are provided free of charge, and are fueled by caffeine.

Creating rounded corners with precision

I love rounded corners.  They can make designs look more elegant, appear more simple and easy to use, and can portray feelings of friendliness and comfort to a user, all on a subconscious level. 

Unless of course, they are done badly.

There’s 4 major mistakes that can lead to rounded corners looking worse than they should:

  1. Squashed boxes
  2. Lazy outer radius
  3. Inconsistent inner radius
  4. Poor anti-aliasing

I’ll explain how each of these mistakes occur, and how you can avoid them to create perfect corners every time. 

Note that this article is about creating rounded corners in Photoshop.  The CSS3 border-radius property will be discussed in a later article.

Squashed Boxes

Easily the easiest to spot, and to avoid.  This happens when you create a box, set up its rounded corners perfectly, and then use a transform (CTRL+T) to resize the box horizontally or vertically.  I’ve seen this happen many times where people are just trying to rush something out, but that’s no excuse.  Take pride in your work. 

If your boxes are done using vectors:

  1. Use the direct selection tool to select only the curve points you want to move to make your box bigger.  Usually it will be 4 points, 2 on each corner.
  2. Drag them to the desired size.

If you’re boxes are raster (recommended)

  1. Make a rectangular marquee selection around half of the box.
  2. With the move tool (v) drag your selected area out to be as big as you want.  This will split your box in two. Use the cursor keys for precision positioning.
  3. Make a 1px wide selection that spans from one side of your box to the other.
  4. Transform this selection (CTRL+T) and stretch it so that it fills the gap created in step 2.

It seems like a lot of steps, but if you use the hotkeys (M), (V), (CTRL+D) (CTRL+T), (CTRL+ENTER) you can get bloody quick at doing this whenever you need.

Lazy Outer Radius

The lazy radius problem occurs when your curve doesn’t go a full 90 degrees between your 2 edges.  If your elliptical selections are a pixel (or more) off, your edges will look weird and jarring to the eye.

To prevent this, just use your eyes and your instinct.  Zoom if you have to, and use the cursor keys to nudge your selections into the right place, and remember that If it looks wrong, it probably is.

Inconsistent Inner Radius

The inconsistent inner radius problem occurs when you have boxes with outlines, or boxes within boxes, and the radius between the inner and outer curves aren’t consistent the whole way through the curve, or aren’t symmetrical.  The thicker the outline, the easier it is to make it look bad. 

The best way to do this is with maths (with maths you say? but I’m an artist! I don’t do maths!).  Lucky for all of us, it’s easy maths!

  1. Start with an elliptical marquee as you normally would.  Take note of it’s diameter when you create it.  In this example we will use 20px.
  2. Figure out how many pixels gap you want between the inner edge and outer edge on the top/bottom and sides.  Let’s say 4px.
  3. Subtract 4px from 20px and you get 16px.  Make your inner marquee’s diameter 16px, and position your box 4px away from the edges.
  4. Win.

Poor Antialiasing

If you’ve been designing for screen for a while you’ll know how important antialiasing is.  The slight changes in opacity and colour that can occur with different methods can either make a design look crisp, or if things are slightly off, a bit fuzzy around the edges.  Now this section is going to address issues with Adobe Photoshop, so if you use Fireworks or something else for your web design, you can skip to the next section.


Traditionally, Adobe has been pretty poor when it comes to vector anti-aliasing.  Vectors in photoshop seemed, for a long time, like an afterthought, and pixel-snapping in Illustrator has only made it’s way to the public with CS5.  Now don’t get me wrong, Photoshop’s vector capabilities have been improved a lot over the years, and as they stand today, are pretty decent for most applications, including boxes with rounded corners, but to my eye, for sharpness and perfection, nothing beats the elliptical marquee method.  It’s a very manual process, but that’s exactly why I like it so much.

  1. Create a box with the marquee tool and fill it with a solid colour.
  2. Create a circular selection with the elliptical marquee tool.
  3. Position this circular selection so that the top and side of the circle touch the top and side of the box.
  4. Invert your selection, then select the eraser tool.
  5. With the eraser set to pencil mode, erase the corner.
  6. Move selection, rinse, and repeat.

Important:

  • The erase must be done with one click+drag of the mouse.  If you delete portions in multiple clicks, the antialiased edges won’t look as good.  Try going over one corner with 5 - 10 clicks as a test to see it’s effect on your corners.
  • Be careful not to erase past 90 degrees of your circle, or you could end up with little ‘nicks’ out of your box that you’ll have to fill with a pencil tool.

And there you have it.  It may seem like a lot of detail to go into for such a simple thing, but sometimes it’s good to take a second look at the basics that we do every day, and dissect exactly what we do and why we do it, for personal growth.

3 Comments

  1. Picture of Chris
    Chris says:

    4. Win

    LOL :)

  2. Picture of Jon Bishop

    I laughed at the “4. Win” part too. I love me some rounded edges. Thanks for breaking it down.

  3. Picture of Ryan Cole
    Ryan Cole says:

    You should do a part 2 detailing the best way to implement this in CSS… I know there are several differing ways to do it.

Commenting is not available in this weblog entry.