border-radius with box-shadow inset pixelized / rugged

问题

If you can't see this problem then please try take a look at this codepen, here you should see what I mean.

I've tried several ways to fix it. Below in comments you can see one of them. Still it seems to render 1px rugged border between proper border and dropped shadow.

If it depends on browser renderer then is it a bug? How to fix it properly for all modern browsers.

html{
  background-color: #554343;
}
div{
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 50%;
  border-width: 0;      /* no result
  border-width: 2px;  // uncommented no result
  border-style: solid;// uncommented no result even with inset*/
  background-color: white;
  box-shadow: inset 1px 1px 150px, inset -1px -1px 150px;
}

<div>
</div>

EDIT: Tried also this way but without positive result:

html{
  background-color: #554343;
}
.container{
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 50%; /* tried 49.5% but it's not acceptable */
  box-shadow: inset 1px 1px 150px #000, inset -1px -1px 150px #000;
}
.content{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: white;
  z-index: -1;
}

<div class="container">
  <div class="content">
  </div>
</div>

回答1:

https://code.google.com/p/chromium/issues/detail?id=442335

Seems like opened Chrome bug. I couldn't come up with a solution for your case. Please vote this issue on bug tracker if you want it to be fixed sooner!

来源：https://stackoverflow.com/questions/30164827/border-radius-with-box-shadow-inset-pixelized-rugged

标签

html

css

css3

box-shadow