title: CSS border-bottom-left-radius not applying in mozilla in a :before part
body: <p>I face an error using my website on firefox.</p>
  <p>When I want to use   border-bottom-left-radius in this specific tag it does not work</p>
  <pre><code>.faq-qa .faq-answer:before {
    content: &quot;&quot;;
    position: absolute;
    z-index: 1;
    bottom: -2px;
    right: -8px;
    height: 19px;
    border-right: 20px solid var(--green-color);
    border-bottom-left-radius: 30px 24px;
  
    transform: translate(0, -2px);
    -webkit-transform: translate(0, -2px);
  
    transform: rotate(55deg) scaleX(-1);
    -webkit-transform: rotate(55deg) scaleX(-1);
  }
  </code></pre>
  <p>I tried out the border-bottom-left-radius in an isolated case to see if it works (because according to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius" rel="nofollow noreferrer">this mozzilla devs site</a> it should. And it did.</p>
  <pre><code>.test-border {
    width: 300px;
    height: 300px;
    background-color: blue;
    border-bottom-left-radius: 30px 24px;
  }
  </code></pre>
  <p>I think it can have something to do with <code>:before</code> because mainly thats the only difference between my normal code and my test code, but I don't know what could I use to solv this. I found a similar error at this site</p>
  <p><a href="https://codepen.io/AllThingsSmitty/pen/jommGQ" rel="nofollow noreferrer">https://codepen.io/AllThingsSmitty/pen/jommGQ</a></p>
  <p>When I open the link in chrome or edge it looks like a nice chat bubble, but when I open it in firefox the arrow stuff is simple not the same.</p>