How to make rounded corners with a border?

[bongobongo]

Hi and hello (new here).

I want to make some nice boxes for my web.

I have read this tutorial on how to make nice rounded corner boxes:

joomlart.com/tutorials/templates_tutorial/how_to_make_rounded_module_like_mamboserver.com_((part_1).html

(hmm I could not submit the full URL above since I'm new and not allowed to post URL before I have posted 5 times, so please add www in front of the above "link")

If you visit the link above, it shows some example boxes with rounded corners on the first page.

Some of those examples have borders as well.

Could not find any information in that nice tutorial on how to make those nice thin borders.

Hope someone here can tell me how to do it.

Basically I want to do what is told in tutorial.
But then I get a nice rounded box in one color with drop shadow.
I would like to have let say the outer 3 pixels of the colored box in another color, but antialiased so I get smooth rounded corners with the borders...

I tried to add another layer with the rounded colored box selected (before the drop shadow), and then on the new layer
do this: Select->Modify->Border and then enter 3.
And then select a color and use PaintBucket to fill that border.
That kind of worked, but it also made those nice rounded corners jaggy..... did not look good at all.

Regards

 

[mfox]

RoundedCornr: Rounded Corner and Gradient Generator

 

[bongobongo]

To mfox:
I thought this was a Photoshop forum!

I was asking how I can accomplish the task using Photoshop, not an online tool.
Anyway, thanks for the link, it may come handy one day.

I still need to find out how I can do it in Photoshop though.

NOTE:
A better example of what I want to accomplish is here:

vertexwerks.com/tests/sidebox/

If you scroll down to first rounded box on that side, then there is a good example of such a rounded corner box with border that I would like to know
how I create in photoshop.

 

[7Hunters]

Okay - no third party tool needed, as usual there are many ways to do the same thing - but I try to post the simplest or at least the way I know...

Go to shapes > (hold down) > Rounded corner tool >
Draw your shape - you'll see a nasty colored fill but don't worry about it!
On the Layers Panel you'll see FILL 100% set that down to about 20% so you can see what you're doing.

Okay now on the layers panel hit fx and apply stroke. Play around with the settings to get the border you want. Let's say you make the border 3px - this is important - remember how thick you set it.

No set the total fill to 0% which will just leave you with the border.

Okay -- so that method may have left "stuff around" your image - maybe at the corners so lets get rid of them!

CTRL+Click on your vector mask (should be grey and show the box you just made) Now you'll see some marching ants around around the entire box.

Now go up to SELECT > MODIFY > EXPAND ---type in 3 pixels

Now your marching ants are on the outside of your image frame.

Go back up to SELECT > INVERSE

Go to the LAYERS panel, and there is a circle half white / half black
click on it and at the top choose "Solid Color" and pick white or whatever the background color of your web page is (you can also type in your hex code to use exactly your web color).

Hope this helps, there might be an easier way of doing this - this was just my method.

Cheers -7

 

[vnvnvn2000]

the CSS that makes our round corner border is:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}