I want to use rounded border in my site. So, I use css rounded border property like this
-moz-border-radius-topright: 7px;
It work in firefox well . But in google chrome , it does not work . Why ?
+13
A:
-moz-... is for Firefox etc. Use -webkit-...:
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
Also note the slight difference in syntax.
You can combine these as you like. -webkit-... will only be recognized by WebKit browsers (Chrome, Safari), -moz-... will only be recognized by Mozilla-based browsers (Firefox.)
Blixt
2009-07-11 08:20:57
True, it's not a standard property, it works on mozilla based browsers.
Mercer Traieste
2009-07-11 08:22:05
Indeed. Properties that are still in working drafts and have not been agreed on are usually prefixed with an identifier unique to the browser. There are also others like `-khtml-...` for KHTML based browsers.
Blixt
2009-07-11 08:25:54
I'd like to add to my previous comment that `-khtml-`... might work in Chrome as well, since WebKit is a forked version of KHTML.
Blixt
2009-07-11 08:48:02
+1
A:
Chrome uses WebKit for rendering, same as Safari. You'll have to add one more CSS property to your class -
.YourClass
{
-moz-border-radius-topright: 7px; /* For Mozilla browsers */
-webkit-border-top-right-radius: 7px; /* For WebKit-based browsers */
}
Kirtan
2009-07-11 08:22:27
I want to know for IE . IE is which type of browser ? Which property to use
thinzar
2009-07-11 08:38:39
@aye thinzar khine: IE uses an engine called Trident. But it does not support rounded corners even in IE7. However, have a look at this: http://dillerdesign.com/experiment/DD_roundies/
Blixt
2009-07-11 09:35:02
+4
A:
The reason why, is that is a Mozilla specific (i.e. Firefox) CSS selector. The relevant CSS3 selector would be:
border-top-right-radius
Webkit (i.e. Safari) also has a non-standard selector: -webkit-border-top-right-radius. Since Google Chrome is based on Webkit, I'd expect -webkit-border-top-right-radius to work. I'd personally include all 3 selectors (as below), then you won't need to edit sometime in the future when everyone catches up with the standard (Firefox 3.5 is already there as far as I know).
.thing{
...some styles...
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
}
Gav
2009-07-11 08:28:14
+1: Yup, including all of them is best for supporting as many browsers as possible.
Blixt
2009-07-11 08:34:45