Creating rounded corners when working with screenshots

25 Apr 2007 > 4 Comments

Often the coding comes first when I’m working on a layout, and as I work on styling each particular element of the page via the style sheet, I take a screen captures and overlay with graphic enhancements.

For anyone out there who uses the same or similar method, I’d like to share a quick tip on how I create rounded corners.

At the moment I’m styling the blockquote element, I’ve taken a screen shot, and I want to apply some simple round corners.

First, create a rectangle shape (on a new layer) with rounded corners, and fill with the blockquote background colour.

Then create a smaller rounded rectangle (again, on a new layer) and flood fill with the body background colour.

Next, move the small rectangle to the top right of the large rectangle, untill the rounded edges are covered.

Finally, move the small rectangle layer beneath, the large rectangle and merge the layers together, and move into place.

And that’s it

Related Posts

• Creating a glassy effect on smilies in MS paint
• Beaver
• Create a Bottle in Paint Shop Pro
• text-indent: -9999px; not working
• Version 4 complete!