Css3 rounded corners not working in Chrome? - Css3 rounded corners not working in Chrome? This works in Firefox, but not Chrome... btw... I know it doesn't work

cena2020 · 21st June 2010, 05:55 AM

Css3 rounded corners not working in Chrome?

This works in Firefox, but not Chrome... btw... I know it doesn't work in ie... ie sucks

-moz-border-radius: 0.5em 0;
-moz-box-shadow: 1px 1px 4px #111;

any suggestions on how to get it to work in chrome?

Mike Hopley · 21st June 2010, 08:56 AM

You're using the Mozilla-specific prefix -moz (Firefox is a Mozilla browser).

To make it work in Chrome (and Safari), you need to add the webkit-specific equivalent (-webkit...). Here's a tutorial.

cew · 21st June 2010, 12:14 PM

Hi this covers, safari and chrome (web-kit), firefox and other mozilla browsers as well as opera:

Code:

 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
border-radius: 5px;

Code:

 -moz-box-shadow: 1px 1px 5px #2D2B35;
 -webkit-box-shadow: 1px 1px 5px #2D2B35;
box-shadow: 1px 1px 5px #2D2B35;

Tom · 16th July 2010, 11:30 AM

Cheers Cew.

I was searching google for the code as I always forget it and this page comes up on the first page for "css3 rounded corners" :)

21st June 2010, 12:14 PM	#3
cew Member Join Date: Apr 2010 Location: South Africa Posts: 49 Thanks: 0 Thanked 3 Times in 3 Posts Expertise: (X)HTML / CSS Experience: Intermediate	Hi this covers, safari and chrome (web-kit), firefox and other mozilla browsers as well as opera: Code: -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; Code: -moz-box-shadow: 1px 1px 5px #2D2B35; -webkit-box-shadow: 1px 1px 5px #2D2B35; box-shadow: 1px 1px 5px #2D2B35; Last edited by cew; 21st June 2010 at 12:16 PM..

16th July 2010, 11:30 AM	#4
Tom Join Date: Jan 2009 Posts: 782 Blog Entries: 16 Thanks: 17 Thanked 35 Times in 35 Posts Expertise: Design & Graphics Experience: Quite Good	Cheers Cew. I was searching google for the code as I always forget it and this page comes up on the first page for "css3 rounded corners" :) __________________ www.fusionservers.co.uk\| Inexpensive Themes

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

21st June 2010, 05:55 AM	#1
cena2020 Whacked Join Date: Jun 2010 Posts: 3 Thanks: 0 Thanked 0 Times in 0 Posts Expertise: Total Beginner Experience: Basic / None	Css3 rounded corners not working in Chrome? Css3 rounded corners not working in Chrome? This works in Firefox, but not Chrome... btw... I know it doesn't work in ie... ie sucks -moz-border-radius: 0.5em 0; -moz-box-shadow: 1px 1px 4px #111; any suggestions on how to get it to work in chrome?

21st June 2010, 08:56 AM	#2
Mike Hopley Member Join Date: Jul 2009 Posts: 211 Thanks: 0 Thanked 19 Times in 18 Posts Expertise: (X)HTML / CSS Experience: Quite Good	You're using the Mozilla-specific prefix -moz (Firefox is a Mozilla browser). To make it work in Chrome (and Safari), you need to add the webkit-specific equivalent (-webkit...). Here's a tutorial.