CSS not working in Safari but works in Chrome

Issue

I have the below CSS which works in Chrome but not in Safari. Why does it not work in Safari?

.header {
  height: 100px;
  width: 200px;
  box-shadow: 
    0 2px 4px -1px rgb(0 0 0 / 20%),
    0px 4px 5px 0 rgb(0 0 0 / 14%),
    0px 1px 10px 0 rgb(0 0 0 / 12%);
}


<div class="header"></div>

Solution

.header {
    -webkit-appearance: none;
    -webkit-box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 
                0px 4px 5px 0 rgb(0 0 0 / 14%), 
                0px 1px 10px 0 rgb(0 0 0 / 12%);
    -moz-box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 
                0px 4px 5px 0 rgb(0 0 0 / 14%), 
                0px 1px 10px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 
                0px 4px 5px 0 rgb(0 0 0 / 14%), 
                0px 1px 10px 0 rgb(0 0 0 / 12%);
}

Answered By - Jacob