How to Make Images with Rounded Corners in Fireworks CS5

There are a number of options available for creating an image with rounded corners for web pages. You can use cascading style sheets to apply the corners (works in browsers that support this feature) or apply the rounded corners directly to your image in an image editor.

In this tutorial, you’ll learn how to apply rounded corners to your image within Adobe Fireworks CS5.

Step 1. Open the image you want to customize in Fireworks.

Step 2. Select the “Rectangle” tool from the Tools panel. Fill and stroke options aren’t important here since we’re only using the rectangle’s shape.

Step 3. Left-click, hold and drag your mouse from the upper left corner of the canvas to the bottom right corner, so the rectangle completely covers the image.

Step 4. Go to the Properties Inspector in the bottom pane. You can open this pane if it’s closed by selecting “Window” and “Properties” or pressing “Ctrl” and “F3.”

Click within the “Roundness” box and enter a value. To make the corners rounder, enter a larger value, such as 40. Notice how the square corners of the rectangle become rounder.

Step 5. Go to the Layers panel on the right. Make sure only the layer containing the rectangle is selected.

Step 6. Select “Edit” and “Cut” or press “Ctrl” and “X” to cut the rectangle from the canvas.

Step 7. Return to the Layers panel and double-check that the layer containing your image is selected, then select “Modify,” “Mask” and “Paste As Mask.”

Your image should look something like this: