Border color doesn't show with border-radius

Question

The border color doesn't show on mobile when using responsive at the same time seems to be fine at desk with mobile resolution testing.

Here is the screen shot from iPod:

Here is the CSS code:

.box img {
    display: block !important;
    margin-top: 8px;
    border: 1px solid #CCC;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

Border color appear only on Nokia Lumia 920

What can I try to resolve this?

Answer 1

It is -webkit bug. Still didn't find exact solution by the way I got temporary solution from @SonuJoshi which is remove add box-shadow instead of border

Old code

.box img {
    display: block !important;
    margin-top: 8px;
    border: 1px solid #CCC;

    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

New code

.box img{
    overflow: hidden;
    margin-top: 8px;

    -webkit-box-shadow: 0px 0px 0px 1px #CCC;
       -moz-box-shadow: 0px 0px 0px 1px #CCC;
            box-shadow: 0px 0px 0px 1px #CCC;

    -webkit-border-radius:6px;
       -moz-border-radius:6px;
        border-radius:6px;
}

Thanks for all help :)

Answer 2

Apply this css in container of the image not the image...

.box{
display: inline-block;
margin-top: 8px;
border: 1px solid #CCC;

-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}

.box img { width:100%; margin-bottom:-1px; }

Answer 3

代码将是

.box img { width:100%; margin-bottom:-1px; }