CSS bug on brave/chrome browser

Tanguy Macé 0
Viewed 25

I'm doing a bit of CSS on cssbattle.dev, and I'm using the box-shadow property

I know very well that a box-shadow is supposed to follow the border-radius of its element. It did work really well the last time I did it but now it's absolutely broken on Brave and Chrome, through it's still working on Firefox for example.

I'm looking for both an explanation and a solution

<div id="a"><div id="b"></div></div>
<style>
  body {
    margin: 0;
    height: 100%;
    display: grid;
    place-items: center;
    background: #0B2429
  }
  #a {
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
    border-radius: 50% 0 50%;
    background: #998235;
    display: grid;
    place-items: center;
  }
  #b {
    width: 50px;
    height: 50px;
    background: #0B2429;
    border-radius: 100%;
    box-shadow: 0 0 0 45px #F3AC3C, 0 0 0 65px #0B2429;
  }
</style>

Here is the code, and here is what I want to do https://cssbattle.dev/play/16

google-chrome css
1 Answers

I don't see a reason why it doesn't work on Chrome. Please find below the code demonstrating the box-shadow and you should be able to see very clearly that it works.

div {
  width: 100px;
  height: 50px;
  border-radius: 10px;
  box-shadow: 10px 5px 5px red;
}
<div>
  Hello
</div>

Unless you are doing something else. In this case, you might want to share your code so that I can help.

Nikhil Mehta0
Related