CSS3 Gradients and Border-Radius Leading to Extraneous Background in Webkit

CSS3 Gradients and border-radius leading to extraneous background in webkit

Finally, after an awfully long time, someone much cleverer than I has a solution to this:

-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

is your friend :)

From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied

It seems like you're trying to produce a gradient to replicate this:

"I then applied an 'inner glow' to it with a 25% opacity, 8px blur, white from the center."

You can do exactly that using an inset box-shadow. For example:

-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);

Do I still need to specify all three `border-radius`, `-moz-border-radius` and `-webkit-border-radius` when creating border radius in modern browsers?

You only need to use border-radius for all modern browsers.

According to

http://caniuse.com/#search=border-radius

https://css-tricks.com/do-we-need-box-shadow-prefixes/

Is it safe to drop the -webkit vendor prefix from the css3 border-radius yet?

Yes, I believe it's safe to drop it.

See: https://developer.mozilla.org/en/css/-moz-border-radius

Lowest version for unprefixed "border-radius"
Safari | Chrome | WebKit  
5.0    | 4.0    | 532.5

So, it's safe to drop if you don't care about users running older versions of Safari/Chrome.

Not many users are running old versions of Safari/Chrome - these browsers aren't IE, where older versions are sometimes clung to for aeons.

Users running these browsers are often savvy enough to update, and both Safari and Chrome aggressively try to update themselves (Chrome even does it automatically).

Also, http://css3generator.com/ has dropped it. (the top Google result for "css3 generator")

border-radius creates an outline in IE

As in my comment above (in the interest of having an answer), use background-clip: content-box in your .rounded class.

Here's some reading material:
http://www.css3.info/preview/background-origin-and-background-clip/

---

Related Topics