Clever Geek Handbook

Border-radius with inset from drawer-shadows, pixelated / solid

If you don't see this issue try to take a look at this codepen , here you should see what I mean.

I tried several ways to fix this. Below in the comments you can see one of them. However, it seems like a 1px solid border between the correct border and the marked shadow .

If it depends on the browser, is it a bug? How to fix it correctly 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>
Run codeHide result


EDIT: Tried this way too, but no positive result:

html{
  background-color: #554343;
}
.container{
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 50%; /* tried 49.5% but it 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>
Run codeHide result


+3


source to share


1 answer


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



Seems to be Chrome open bug. I couldn't think of a solution for your case. Please vote up this issue if you would like it fixed sooner!

+1


source






More articles:


All Articles