StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I originally expected that something like...</p> <pre><code>$("selector") .css({borderRadius: 10}); .animate({borderRadius: 30}, 900); </code></pre> <p>...would work. But, I was wrong: Webkit allows you to <em>set</em> the value for all four corners via <code>borderRadius</code>, but won't let you read it back - so with the code above, the animation will always start at 0 instead of 10. IE has the same problem. Firefox <em>will</em> let you read it back, so everything works as expected there. </p> <p>Well... border-radius has sort of a history of implementation differences.</p> <p>Fortunately, there's a work-around: just specify each corner radius individually:</p> <pre><code>$("selector") .css({ borderTopLeftRadius: 10, borderTopRightRadius: 10, borderBottomLeftRadius: 10, borderBottomRightRadius: 10 }) .animate({ borderTopLeftRadius: 30, borderTopRightRadius: 30, borderBottomLeftRadius: 30, borderBottomRightRadius: 30}, 900); </code></pre> <p>Note that if you wish to maintain compatibility with older browsers, you can go all-out and use the old browser-prefixed names:</p> <pre><code>$("selector") .css({ borderTopLeftRadius: 10, borderTopRightRadius: 10, borderBottomLeftRadius: 10, borderBottomRightRadius: 10, WebkitBorderTopLeftRadius: 10, WebkitBorderTopRightRadius: 10, WebkitBorderBottomLeftRadius: 10, WebkitBorderBottomRightRadius: 10, MozBorderRadius: 10 }) .animate({ borderTopLeftRadius: 30, borderTopRightRadius: 30, borderBottomLeftRadius: 30, borderBottomRightRadius: 30, WebkitBorderTopLeftRadius: 30, WebkitBorderTopRightRadius: 30, WebkitBorderBottomLeftRadius: 30, WebkitBorderBottomRightRadius: 30, MozBorderRadius: 30 }, 900); </code></pre> <p>This starts to get pretty crazy though; I would avoid it if possible.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload