CSS round corners

[marSoul]

It maybe seems silly !
But I want to know why we should create round corners with CSS not with photoshop ?
Why we try to divide the background to 8 parts to create a CSS DIVs background and not only put the background image itself behind a DIV ?

[Jack Franklin]

You can make rounded corners without images using bullet points:
http://www.cssplay.co.uk/boxes/curves.html

Never tried it myself, I always use photoshop !

Jack

[marSoul]

I know, i mean those css that uses images to creating round corners

[Jack Franklin]

Oh I see what you mean. It's because it allows the <div> with the rounded corners to expand in width and height but keep the corners. If you had a rounded box that was say, 300x300, and your content was 500px high, you would need to edit your box. If your content then changed again, you would again have to edit your box.

[marSoul]

These types seems reasonable, but i see some types that they are fixed in height and width but they created with images and css, what about them ?

[Jack Franklin]

Then the person who developed that has just made very hard work for themselves!

[Lchad]

If you had a rounded box that was say, 300x300, and your content was 500px high, you would need to edit your box. If your content then changed again, you would again have to edit your box.

I don't get it?????

jack can you explain? Are we talking about corners for css boxes that do NOT use an image?
Are you saying by using only css, no matter what size box you have for text, the corners will adjust in size making them the right ratio (is that the word I want?)

[marSoul]

No, the discussion is about those css round corners which use images and are in fixed sizes

[Jack Franklin]

Originally Posted by Lchad

I don't get it?????

jack can you explain? Are we talking about corners for css boxes that do NOT use an image?
Are you saying by using only css, no matter what size box you have for text, the corners will adjust in size making them the right ratio (is that the word I want?)

Yep I think I have confused everyone here1

I belive the question asked was 'Why do people use all those extra divs and images when their text to go in their rounded box has a fixed width and height?'

I then got confused and posted a link to rounded boxes without images and then realised that he wasn't looking for a solution.

I think.

LOL sorry!

Jack

[Lchad]

LOL... OK... I guess!

I'm so lost on this thread. Can rewind and start over?



I usually use a three div box.

1)Is usually a top div with an image of the top left/center/right portion of a graphic
2)Then a solid color center div (or an image with a background)
3)Is usually a bottom div with an image that has the bottom left/center/right


This limits you to how wide the box can expand because the top and bottom graphics cannot expand. They have set widths.

So I suppose by having a 1)left top corner, 2)top center (repeat-x), 3)right top corner
4)middle (repeat: both)
5)left bottom corner, 6)bottom center (repeat-x), 7)right bottom corner
that would account for 7 divs.
Now your boxes can expand in width and height as you need. Where is div #8?

And since I have not yet answered or tried to answer marsoul's question.. and completely confused myself... I have no idea why anyone would want to NOT use images unless you are a css purist.

Fire & Knowledge has a tutorial on it making rounded corners without images.. and reasons why...
I don't find any of his reasons very worthy.

[MikeHopley]

http://www.webcredible.co.uk/user-fr...rs-boxes.shtml

[Monie]

Originally Posted by marSoul

These types seems reasonable, but i see some types that they are fixed in height and width but they created with images and css, what about them ?

There should be some reason for that. Or maybe the developer don't know how to create rounded corner the css way.

Fixed width and height - go for photoshop
Flexible width and height - go for css

[MikeHopley]

Originally Posted by marSoul

These types seems reasonable, but i see some types that they are fixed in height and width but they created with images and css, what about them ?

Fixed in height is pretty unusual.

Fixed-width boxes make sense in a fixed-width page layout, and they require fewer images (and less markup).

I believe scalable (elastic) layouts are best, and for these your boxes will need to be fully scalable too. But fixed-width layouts are easier, especially if you have lots of intricate decoration.

[marSoul]

I know about fixed and elastic designs, but my question was why dont use programs like photoshop to create these boxes and dont create 8 pieces of images for css style ?

[MikeHopley]

Originally Posted by marSoul

I know about fixed and elastic designs, but my question was why dont use programs like photoshop to create these boxes and dont create 8 pieces of images for css style ?

8 pieces is flexible.

If you want your box completely fixed, then you could make one big image. Ugh.

[Hardbyte]

Iv got scripts that do the rounded corners in CSS, complete with transparent edges so you can use it on gradient backgrounds.

Is this what your looking for instead of using images for the corners?

[welshstew]

<cough>
you could always get someone to do it for you
</cough>

[Lchad]

Bookmarked that Stew!!! Nice link (cough)!
Shhhh.. don't tell anyone I bookmarked it!

[marSoul]

No i did not look for how to create it, i just want to know why we should use css to build them when we can easily create it with photoshop !

[moojoo]

CSS3 has corner-radius: but that probably isn't helpful.