1

I have a circle with a double border. The inner white border is set by the border property. The outer gray border is set by box-shadow property. On Android 4+ and iOS 6.0, the outer border is curving properly but the inner border is not.

Correct:

enter image description here

Incorrect:

enter image description here

Here's the code:

-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;

-webkit-border-radius: 50%;
border-radius: 50%;

-webkit-box-shadow: 0 0 0 2px #b2b0b0;
-moz-box-shadow: 0 0 0 2px #b2b0b0;
box-shadow: 0 0 0 2px #b2b0b0;

border: 3px solid white;
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;

Why would border-radius correctly effect box-shadow but not border?

4
  • The problem might be with the border-radius set with purcentage. Did you try with pixels values?
    – Blo
    Apr 19, 2014 at 18:29
  • Using pixel values has the same result. Apr 21, 2014 at 14:00
  • 1
    Wrapping the element in a div and giving applying the double border to that div fixed the problem. Apr 21, 2014 at 15:00
  • Glad it's working now. You should post your solution and accept it.
    – Blo
    Apr 21, 2014 at 15:22

1 Answer 1

0

I arrived at this workaround:

Wrap element in a div:

<div class="double-border">
  <img />
</div>

and apply the double-border to the wrapper:

.double-border {

   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;

   -webkit-border-radius: 50%;
   border-radius: 50%;

  -webkit-box-shadow: 0 0 0 2px #b2b0b0;
  -moz-box-shadow: 0 0 0 2px #b2b0b0;
  box-shadow: 0 0 0 2px #b2b0b0;

  border: 3px solid white;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
}
1
  • I've found that this technique will not work for a single border applied using the border property. Instead, use a solid box-shadow as a substitute. Mar 12, 2015 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.