Rounding Corners

[grabenair]

Hello, I am having a brain fart. I can not remember how to round corners on a border in DW or Fireworks. I want to round the corners on my border. Also I think I remember that I read somewhere that you can do it in fireworks also.

[PicnicTutorials]

Fixed width or no?

[grabenair]

I use fixed width. Thank you for the links. I found the css code for rounding corners. I did not even know that you could do that. It works great. I will use that from now on. There is a way in DW and fireworks to do this. I remember in DW that it was just a couple of clicks. But I like your way better. And thank you again.

[LSW]

It is generally done with images in DW and Fireworks. Or you can use a Flash based app like Flex/Flash Builder.

 

Are the links already posted somewhere here Eric? Surprised you did not attach them for others, so figured you have them posted elsewhere.

[PicnicTutorials]

The only links I posted where that in my sig.

 

The easiest way to do fixed width rounded corners is the make your image in whatever. Then slice it into three pieces. top, mid, bot. Then make 3 divs top, mid, bot. top and bot don't repeat. mid is a 5px peice that repeats-y down the mid div. Any padding will need a 4th div nested in there. Or you can do away with the 4th div by giving the inner elements the padding instead.

[LSW]

Maybe your signature links then. OK, Cheers

[grabenair]

I used this link www.visibilityinherit.com/tools.php from Eric

[pb1uk]

In css3 there is built in capabilities for rounding borders. It supports most modern browsers atm except for IE (no surprise there) although IE 9 beta does support it. It should be standard pretty soon, hopefully anyway! For the sake of it not displaying in most IE, i've started using it now. IE isn't the most populare browser anymore anyway.

 

My mate has made a site for generating code which i've been using. Also has useful stuff for text and box shadow as well

 

CSS3 Border Radius - css3gen.com

[grabenair]

Thanks for the link pb1uk I went and played with it is is so cool!

[danhodge]

-moz-border-radius: 12px 12px 12px 12px;

 

This is the code from the Killer PHP videos on youtube, here:

 

http://www.youtube.com/user/killerphp#p/u/140/AjpBnzhq8D0

 

I found it useful

 

Although it only works for Firefox, its suits the majority...

 

Also, on fireworks, i believe rounded edges is just shown as 'Bevel', or you create a round edged rectangle

But that may be from a version thats quite old, so im uncertain.

 

Hope i helped

[pb1uk]

 

Although it only works for Firefox

 

 

The code from css3gen also works in chrome and pretty sure safari as well, although haven't tested it in there myself. The best way to utilise this is in the css put rules so that if the border radius rules can't be used then an image is for the rounding corners. This way it'll look the same in all browsers and will be displayed in the best way possible