0

I have here very simple code that shows a glitch in which there is a bit of white space where there shouldnt be, in the corner of the border radius. I simply have a colored div behined a button with overflow hidden. In chrome it's very bad when you zoom in and out you can see a lot of whitespace in the whole border where the overflow hidden is active. [click to see chrome screenshot] In firefox it is better but there is still white space in the corner where there shouldnt be. [click to see firefox screenshot] I couldn't figure out any fixes around this and it is very ugly, pls help! thx 

<style>
    button {
        border: 10px solid purple;
        border-radius: 30px;
        height:300px;
        width:300px;
        overflow: hidden;
        position: relative;
    }
    div {
        background: purple;
        position: absolute;
        height: 400px;
        width: 400px;
    }
</style>
<body>
        <button><div></div></button>
</body>
T S
  • 245
  • 2
  • 10

1 Answers1

0

You can use css linear-gradient to solve this:

button {
  border: 10px solid purple;
  border-radius: 30px;
  height: 300px;
  width: 300px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(transparent 100px, purple 100px);
}
<button></button>
Developer
  • 425
  • 3
  • 15
  • It's a good alternative for this specific code but I am originally trying to make one of those sliding backgrounds on hover for buttons, and my ::before element is a div and a linear background cant replace it i dont think – T S Apr 17 '21 at 21:35
  • https://codepen.io/tamircode/pen/VwPBEvN?editors=1100 here is the code for my button with ::before issue – T S Apr 17 '21 at 21:50