CODEWITHSUNDEEP
htmlcssimagecompatibility
Ovilia
Ovilia

Reputation: 7256

Image with border not ideal

I set image border using

img {
    width: 25%;
    border-radius: 50%;
    border: 5px red solid;
}

And it is supposed to be like

But on some Android Web defualt Browser on low Android version, it turns into

My Android version is 4.1.

How to fix this with CSS?

Upvotes: 0

Views: 55

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

Instead or border use box-shadow

box-shadow: 0px 0px 0px 5px red;

demo - http://jsfiddle.net/Lkdyv2jj/5/

img {
  width: 100px;
  border-radius: 50px;
  box-shadow: 0px 0px 0px 5px red;
}
<img src="http://zhangwenli.com/YooYo/img/avatar.png" />

Upvotes: 2

2by
2by

Reputation: 1093

It's a bug as far as I know, try this:

border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

Or this:

border-radius: 10px;

Instead of %

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

Known issues:

Safari does not apply border-radius correctly to image borders: Rounded cornes (border radius) Safari issue Android Browser 2.3 does not support % value for border-radius. Border-radius does not work on fieldset elements in IE9. The stock browser on the Samsung Galaxy S4 with Android 4.2 does not support the border-radius shorthand property but does support the long-hand properties for each corner like border-top-left-radius.

Upvotes: 0

Related Questions