CSS border-radius in Android 4.2.2

1

Hi, is anyone having trouble implementing border-radius to a button or any element on Android 4.2.2?

<button class="button icon ion-gear-a"></button>

For the button above, the CSS rules:

button{
    border-radius: 5px;
   -webkit-border-radius: 5px;
}

It works fine on browser (Duh!) and on 4.4.2 (Because of chromium web view). But silly thing breaks on
4.2.2.

Any work around for this?

2

Hmm, could I be getting overwritten by some other css?

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

CanIUse says that border-radius should work fine on 4.2

3

Yeah! I did see it.

The problem was, background-color “leaking” outside of a border when border-radius is present.

So, I used

/* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box;

Now it works just fine.

And that is the solution there.

1 Like