Rounded corners?

[unplugged_web]

Is it possible to have rounded border corners using CSS? So that a box appears to have curved corners?Thanks

[jeffman]

Yes it can be done, no it's not simple. Do a forum search or Google search for rounded corners. You'll find many methods. They typically involve multiple divs and background images.

[unplugged_web]

Yes it can be done, no it's not simple. Do a forum search or Google search for rounded corners. You'll find many methods. They typically involve multiple divs and background images.

thanks

[Shonumi]

I wouldn't say it's all that hard, unless you go towards those otherwise involved methods which use purely CSS (no images), but I commonly solve this problem as follows. I make a transparent GIF (because IE doesn't support transparent PNGs yet) and eliminate the edges by making them transparent, usually with a photo editting program like The GIMP. Then create a div the same size as the image I want, and then just set the background as that image. The only problem with this is loading time, especially if you've got lots of material. If you're daring enough, and the whole page needs to have rounded corners, you could just make the entire page one gaint div, albeit broken into smaller divs, and set the background of it as one large image. That's the simplest method I know of, but it just requires some intution, not so much as surpassing its difficulty.

[unplugged_web]

I wouldn't say it's all that hard, unless you go towards those otherwise involved methods which use purely CSS (no images), but I commonly solve this problem as follows. I make a transparent GIF (because IE doesn't support transparent PNGs yet) and eliminate the edges by making them transparent, usually with a photo editting program like The GIMP. Then create a div the same size as the image I want, and then just set the background as that image. The only problem with this is loading time, especially if you've got lots of material. If you're daring enough, and the whole page needs to have rounded corners, you could just make the entire page one gaint div, albeit broken into smaller divs, and set the background of it as one large image. That's the simplest method I know of, but it just requires some intution, not so much as surpassing its difficulty.

Thanks for that I did originally use an image, but want to keep the load time down as much as poss.

[Synook]

Well for my rounded corners I used four images, floated to the top-left, top-right, bottom-left, and bottom-right. Each image is only 116 bytes (8 x 8), so sizes are still small.

[S@m]

Rounded corners are a hassle. http://www.cssjuice.com/25-rounded-corners...iques-with-css/They have their place/time, but 99% of the time...not worth the "effort" if you ask me. Hopefully css3 will make it easier.(just my opinion)

[jeffman]

Everything's a hassle if you only want to do it once. The best approach to rounded corners, drop shadows, things like that is to make a system you can use over again no matter what the size is.My approach is to create a master image like the one I imagine my pseudo-dialogs would look like. Then grab a 10x10px or 20x20px image for each corner. Then a 1x10 or 1x20 image for each side. The 1x images become repeatable background images to fill in sides of any length. As with Synook's plan, all these images are small enough that they download almost instantly.Make the set-up function general enough that you can pass it a single div reference and the sides and corners take care of themselves. The real hassle is the trial and error with the offset math. But once it's in your set-up function, you never have to look at it again. As much as possible, write reusable code. (Most of you know this, but for those who haven't thought about it . . . )