General site/css (round corners) ?

[Josh]

Hi,

I am working on a site, and I want to use CSS boxes with round corners.

I have never done round corners in CSS before, and Im not sure which way is best.

I know of ways of creating the left&top sides in one image, and the bottom&right sides in another, but I've also seen it done where only tiny images of the corners are used.

I'd prefer to use the latter method. The problem is, I cannot find a good tutorial on that method anywhere, and I dont want to copy the code directly from the sites where I've seen it used, ya know?

Also - would it be best to create all the CSS (square) boxes I want, get everything done, then add the rounded corners in later, or add the corners as I do it?

Sorry if my questions seem kind of vague :/

thanks for the help though!

 

[jeremy.king]

Correct me if I am wrong, but I think you need either a div with 9 elements (3x3) inside or a 3x3 table to accomplish a layout like this, setting each corner element/cell with the rounded corner image. Unless, you have a fixed size element, you could then use a big honkin' background image.

 

[pyrotoaster]

If the column is a fixed width, you can make the rounded corners one image that fits on the "top" of the column (using a seperate row).

 

[Josh]

Correct me if I am wrong, but I think you need either a div with 9 elements (3x3) inside or a 3x3 table to accomplish a layout like this, setting each corner element/cell with the rounded corner image. Unless, you have a fixed size element, you could then use a big honkin' background image.

Yes, the div with 9 elements is what Im thinking of *i think*.

check out http://drupal.org for an example of their css corners that use the technique I am looking for.

 

[Benjamin]

http://alistapart.com/articles/customcorners/

 

[jeremy.king]

http://alistapart.com/articles/customcorners/

Wow! Very well done.

 

[Josh]

http://alistapart.com/articles/customcorners/

I read that article once before, but I dont know - Im new at this so correct me if Im wrong - but wouldnt it be better to use 4 very tiny images, than to do what they do?

Creating an 800x600 image just to get a 5x5 rounded corner just seems odd to me

 

[LeeTom]

I read that article once before, but I dont know - Im new at this so correct me if Im wrong - but wouldnt it be better to use 4 very tiny images, than to do what they do?

Creating an 800x600 image just to get a 5x5 rounded corner just seems odd to me

Well, if you read into it... They make that image just so they can cut the corners out. They don't use it, just 4 very tiny corner images.

Lee Tom

 

[Josh]

Well, if you read into it... They make that image just so they can cut the corners out. They don't use it, just 4 very tiny corner images.

Lee Tom

Take a look at this page: http://alistapart.com/d/customcorners/step1.1.html

Shows how they sliced up the images. I've tried this tutorial, using the exact images and code they give on their site. It works, don't get me wrong....just seems kind of a round-a-bout way.

The way they do it, you have to create the bottom left corner and the bottom edge in one image that is as wide as you expect your widest article to ever be.

If you had one colum, that bottom image could end up being 800 pixels wide, which just seems like more than necessary.

 

[Doctor Q]

check out http://drupal.org for an example of their css corners that use the technique I am looking for.

As a matter of fact, that site doesn't do it properly. You can see the corner images.

 

[Josh]

As a matter of fact, that site doesn't do it properly. You can see the corner images.

Thats strange. In your image, I can see the corner images, but at the actual site, and when I zoom in on a screenshot, I can't see them.

Here is the very same box zoomed in 500x (notice, no corner images can be seen):

 

[Doctor Q]

I can't explain the difference from my screenshot to yours. I'm using Safari with default settings.

 

[iMeowbot]

Odd, it looks right in Gecko browsers and Mac IE, but I see the mismatched blue in Safari too.

 

[ChicoWeb]

Thats strange. In your image, I can see the corner images, but at the actual site, and when I zoom in on a screenshot, I can't see them.

Here is the very same box zoomed in 500x (notice, no corner images can be seen):

They probably just used the wrong hex color for the table bg. It obviously doesn't match.

 

[kgarner]

I believe it has to do with saving the file with the wrong (or was it without any) gamma settings. That is, if the image is a .png. I remember reading about that somewhere for PNG images. Other browsers assume no default gamma setting and Safari assumes the system default gamma setting. If I feel ambitious I will try to find the article I read about this in.

 

[Josh]

I can't explain the difference from my screenshot to yours. I'm using Safari with default settings.

I was viewing it w/ FireFox on Windows.

Ah well...not much of a concern

Im going to play with the CSS some more....I'll just work on a completely blank page with a CSS div in it and try to get the corners right.

Thanks to everyone who responded