CSS round corners

marSoul · #1 Sep 30th, 2007, 18:07

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 · #2 Sep 30th, 2007, 18:27

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 · #3 Sep 30th, 2007, 19:34

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

Jack Franklin · #4 Sep 30th, 2007, 20:12

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 · #5 Sep 30th, 2007, 20:28

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 · #6 Sep 30th, 2007, 20:49

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

Lchad · #7 Sep 30th, 2007, 21:15

Quote:

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 · #8 Sep 30th, 2007, 21:24

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

Jack Franklin · #9 Sep 30th, 2007, 21:40

Quote:

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 · #10 Sep 30th, 2007, 23:23

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 · #11 Oct 1st, 2007, 11:50

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

Monie · #12 Oct 2nd, 2007, 02:25

Quote:

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 · #13 Oct 2nd, 2007, 08:51

Quote:

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 · #14 Oct 2nd, 2007, 11:36

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 · #15 Oct 2nd, 2007, 14:28

Quote:

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 · #16 Oct 4th, 2007, 09:55

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 · #17 Oct 4th, 2007, 09:57

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

Lchad · #18 Oct 4th, 2007, 11:21

Bookmarked that Stew!!! Nice link (cough)!

Shhhh.. don't tell anyone I bookmarked it!

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS round corners