Your Customers are Mobile, you will be too …

In this tutorial we will show you how to add one or two rounded corners to a rectangle in Fireworks CS5.5. It is pretty much common knowledge that you can only set all four corners to rounded and all need to be rounded off the same using the standard Fireworks tools. We will show a simple work around that will enable you to round those corners off while maintaining your others corners squared off. This is fairly common in web design and frustrating to most beginner web developers while wireframing in Fireworks.

If you are looking to do three round corners I have added a tutorial for that now which you can find here.

Fireworks CS5.5: Adding One or Two Rounded Corners to a Rectangle

The process of doing this is actually very simple but not obvious when your first trying to do it. Open a blank document in Fireworks and lets get started. Give yourself a bit of room to work with.

First select your rectangle tool and draw a rectangle and give it rounded corners. In the example I am doing for you I have used a 20px radius so you can see it fairly clearly.Step two simply involves drawing a second rectangle that overlaps your first rectangle. Do not round off the corners on this one. Change to your selection tool and select both rectangle by clicking on them both one at a time while holding down the Shift key.

Your rectangle in Fireworks ready to have one corner rounded off

Now from your main menu select Modify >> Combine Paths >> Crop … and you are now left with a rectangle with one round corner.

Rectangle with one rounded corner done in Fireworks CS5.5

A rectangle with one rounded corner done in Fireworks CS5.5

If you wish to round off 2 corners make the second rectangle wider the the first and make sure that it covers the 2 corners you want retained.

First step to rounding off 2 corners of a rectangle in Fireworks CS5.5

Select Modify >> Combine Paths >> Crop… again like last time. You now have a rectangle with 2 rounded corners.

A rectangle with 2 rounded corners done in Fireworks CS5.5

Hope you found this helpful and see you again next time.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: