getComputedStyle doesn't work with webkitBorderRadius (among others) I need this for animation. Currently, this fails in webkit. The following works in Mozilla: javascript:alert(getComputedStyle(document.body,'').MozBorderRadiusTopright); The following does not work in Mozilla because Mozilla does not return shorthand values: javascript:alert(getComputedStyle(document.body,'').MozBorderRadius) Both should work in webkit: javascript:alert(getComputedStyle(document.body,''). WebkitBorderRadius sTopright); // "0px" javascript:alert(getComputedStyle(document.body,''). WebkitBorderRadius); // "0px" The first one is pretty straightforward. The second one is a shorthand value, which falls under another category. FF2 and Safari3 return the empty string for: AFAIK - Shorthand values are not guaranteed to return any specific format. Is there a spec reference for this? For example, what format should the following return: getComputedStyle(document.body,'').margin "0px" or "0px 0px 0px 0px"? Preferrably a shorthand would return 1 or 4 values, never "0px 0px" or "0px 0px 0px" -- that would complicate scripts.
WebkitBorderRadius is actually unimplemented in CSSComputedStyleDeclaration::getPropertyCSSValue other properties are currently implemented but you should notice differences between Gecko and Webkit: -moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius So WebkitBorderRadiusTopleft doesn't work but WebkitBorderTopLeftRadius works correctly. Check attached test case.
Created attachment 26456 [details] test case
Created attachment 122452 [details] Updated version to use border-radius.
I strongly encourage to use border-radius CSS property rather the vendor prefixed version. I attached a modified version of the test case which output the result as expected. It's almost a simple search and replace.