Rounded Corners without CSS3?

lirikh · 29th Sep 2011, 01:20 PM

Is there a way to accomplish rounded corners without the use of CSS3 or tables' rounded corner images? CSS3 is not compatible on all phones, and I've always tried to avoid tables.

I'm trying to build a navigation menu like the ones below, but I can't figure out how the rounded corners were made.

Any input?

Thanks.

Joe Motion · 29th Sep 2011, 01:35 PM

Those are the only 2 ways that I know of.. just use CSS.. the mobile browsers that don't use it won't look that bad.

FitChic4Life · 29th Sep 2011, 02:33 PM

These three sites may be helpful to you:

RoundedCornr: Rounded Corner and Gradient Generator

Round corners in pure css for liquid design and transparent scrolling - tutorial and stylesheet

The Trick to Rounded Corner Tables » SitePoint

Jonas B · 29th Sep 2011, 03:45 PM

First of all, if you don't use CSS3 for rounded corners, than the only thing you can use are images of rounded corners.

I also wouldn't go with tables, as the menus you are showing should be a simple ul.

Although i wouldn't care about it as iphone and android support it, blackberry will soon..

WillR · 1st Oct 2011, 08:25 PM

Those are my designs you have displayed and they were simply done using CSS3. As others have stated the corners are just square on those phones that do not currently support CSS3 however it won't be long before most of the major phones all support and use CSS3.

Definitely use CSS3 over images - a much smarter way of doing things.

lirikh · 2nd Oct 2011, 12:57 AM

Which kind of css3 do you use for rounder corners? moz, webkit or gecko? or adapt all of them? Gotta research more on that.

Question for your theme design: what made you not add any gradient style? I think a little somewhere would be good to add, since gradient are made easily with css3 and i'lve always wanted some kind of gradients in my design.

Flat Fee Recruitment · 11th Oct 2011, 05:08 PM

Originally Posted by Jonas B

First of all, if you don't use CSS3 for rounded corners, than the only thing you can use are images of rounded corners.

I also wouldn't go with tables, as the menus you are showing should be a simple ul.

Although i wouldn't care about it as iphone and android support it, blackberry will soon..

I agree, CSS3 is creeping upon us daily! Why not use it now, it all depends on your audience/market I guess?......

29th Sep 2011, 01:20 PM	#1
lirikh HyperActive Warrior Join Date: 2010 Posts: 314 Thanks: 61 Thanked 12 Times in 11 Posts	Rounded Corners without CSS3? Share on: Is there a way to accomplish rounded corners without the use of CSS3 or tables' rounded corner images? CSS3 is not compatible on all phones, and I've always tried to avoid tables. I'm trying to build a navigation menu like the ones below, but I can't figure out how the rounded corners were made. Any input? Thanks.

29th Sep 2011, 01:35 PM	#2
Joe Motion Location Independent War Room Member Join Date: 2011 Location: Bangkok, Thailand Posts: 411 Thanks: 99 Thanked 83 Times in 55 Posts	Re: Rounded Corners without CSS3? Share on: Those are the only 2 ways that I know of.. just use CSS.. the mobile browsers that don't use it won't look that bad.
	Living in SE Asia.. BKK.. PM me for a beer!

29th Sep 2011, 02:33 PM	#3
FitChic4Life Warrior Member Join Date: 2011 Posts: 7 Thanks: 0 Thanked 1 Time in 1 Post	Re: Rounded Corners without CSS3? Share on: These three sites may be helpful to you: RoundedCornr: Rounded Corner and Gradient Generator Round corners in pure css for liquid design and transparent scrolling - tutorial and stylesheet The Trick to Rounded Corner Tables » SitePoint

29th Sep 2011, 03:45 PM	#4
Jonas B Mobile Expert War Room Member Join Date: 2011 Posts: 287 Thanks: 18 Thanked 15 Times in 15 Posts	Re: Rounded Corners without CSS3? Share on: First of all, if you don't use CSS3 for rounded corners, than the only thing you can use are images of rounded corners. I also wouldn't go with tables, as the menus you are showing should be a simple ul. Although i wouldn't care about it as iphone and android support it, blackberry will soon..
	Proud owner of the most flexible mobile app builder. Check it out at http://bit.ly/hybrica! Mobile Web Expert & Android Developer

1st Oct 2011, 08:25 PM	#5
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,475 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: Rounded Corners without CSS3? Share on: Those are my designs you have displayed and they were simply done using CSS3. As others have stated the corners are just square on those phones that do not currently support CSS3 however it won't be long before most of the major phones all support and use CSS3. Definitely use CSS3 over images - a much smarter way of doing things.
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

2nd Oct 2011, 12:57 AM	#6
lirikh HyperActive Warrior Join Date: 2010 Posts: 314 Thanks: 61 Thanked 12 Times in 11 Posts	Re: Rounded Corners without CSS3? Share on: Which kind of css3 do you use for rounder corners? moz, webkit or gecko? or adapt all of them? Gotta research more on that. Question for your theme design: what made you not add any gradient style? I think a little somewhere would be good to add, since gradient are made easily with css3 and i'lve always wanted some kind of gradients in my design.