Basically I am trying to work out how I do rounded corners on a DIV in CSS that will render in google chrome
+7
A:
Google Chrome (and Safari) work with the following CSS 3 prefixes
-webkit-border-radius: 10px;
for all corners at 10px
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
for the top left corner and bottom left at 8px
For Firefox you can use:
-moz-border-radius: 10px;
for all the corners and
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
for the top left corner and bottom left
Spasm
2009-10-02 07:39:10
@Spasm i think you have it but just to be clear border-radius is the CSS 3 class. webkit prefix is specifically for Chrome and other webkit browsers.
dove
2009-10-02 07:50:34
@dove - since Spasm didn't mention `border-radius` without the prefixes, are you just wanting to point out that some day there will be a browser other than Opera that supports this style rule without the prefix?
Anthony
2009-10-02 07:54:36
@Anthony: Hopefully Webkit and Mozilla browsers will some day drop the prefix, and just convert to the default, like they're supposed to. And if you already have `border-radius` in there, then you won't have to go in and change your code...
peirix
2009-10-02 07:57:57
@peirix thank you and well put, you're spot on.
dove
2009-10-02 08:14:53
@Dove - I agree we should not be going down the road where there are different prefixes for the same effect on a style rule. I was merely just trying to answer the question and to illustrate there are different methods. Your comments indeed are correct, thx for clarifying for readers
Spasm
2009-10-02 08:55:13
+14
A:
To cover both Chrome, FF and any browser that supports CSS 3:
{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
dove
2009-10-02 07:45:46
A:
It's future-useful to code your css like this:
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
That way, when IE9/IE10 comes out your code will also work there as well :D
gmiernicki
2009-10-12 22:31:54