htmlcsscross-browserresponsive-design

Border color doesn't show with border-radius

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:

enter image description here

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?

Solution

  • It is a -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;
}