Transparent rounded corners

Someone know how to create a rounded rectangle in photoshop with transparent cornerts ? I read the CSS Master book, please click here:

I know what author say on CSS side, but the author don’t explain how to create the transparent corners.
I appreciate any idea! thanks!

You can use a Rounded Rectangle tool and draw your rectangle on a separate layer - just remember to turn the background off and save your image as a PNG file.
For a simplified “roundness” and jagged corners, you can use any tool like filling a selection or drawing with a pencil. Such an image, with no smooth edges can be saved as a common 8-bit PNG (while for the real smooth rounded corners you needed the 32-bit PNG*).

*) This can also be achieved with the 8/8-bit PNG, but unfortunately Photoshop doesn’t offer any support for it.

Go to the shapes button in photoshop -> rounded rectangle

You can then change the radius of the shape to make the corners as rounded or sharp as you want.

Thanks, but what I need to do to turn the background off ? Thanks!

Are you talking about the background layer in the PSD?

If so you do that in the layer menu on the right side of photoshop.

Please read the first post… I explain what exactly I need… I need a transparent rounded corner… I don’t know what relation the background has ?

This is why i said about the background friend. You simply said i need to turn the background off.

OK I turned the background off, but I don’t see transparent corners. Only the background is transparent… I need transparent rounded corners, not background transparency.

Okay sorry for the misunderstanding, what I would suggest is create your rounded corners like you have and then create a 2nd copy of it and then lower the opacity down for the 2nd layer so it will be transparent.

If you can’t get this working I will be happy to take a look at it for you and see what I can do .

I need white background with transparent rounded rectangle.
This is a crop, but I think… demonstrate what exactly I need (the white is the background color and the transparent area is the top left corner).

I reduce the transparency for the rounded rectangle but I see the white background color. I need to remove the background color only in the rounded rectangle.

Any idea how to do this? Thanks!

I will take a look at it.

You want the image you gave me but you wanted it to have rounded corners instead of the right angles correct?

wow! nice., i’ve gathered enough info on this thread., :lol:


Sorry, I have been out of town, we went to Bristol yesterday, and just got back home at like 3AM this morning.

I will try to look at this tonight.

I think there is some overlap in the terminology being used here.

The technique as I understand it is to use a small “curved” image with a transparent side facing inwards to the tables colour, and the coloured pixels ‘curve’ in the same colour as the website’s background colour.

That means that in Photoshop the “background” layer should be transparent, and whatever shape/curve you use should be filled with the same colour as the websites background colour.

Some of these people should use two different colours to illustrate their tutorials where neither of those colours are black/white!