おそらく、div のエッジのアンチエイリアシングに問題があります。ここでは、丸い角の近くに細い白い線が見えます。
それを修正する方法はありますか？
html {
background-color: #4A5960;
}
.card {
min-height: calc(100vh - 120px);
max-width: 350px;
margin: calc(env(safe-area-inset-top) + 58px) 20px;
position: relative;
overflow: hidden;
background-color: white;
cursor: pointer;
border-radius: 14px;
background-size: cover;
background-position-x: center;
padding-top: max(env(safe-area-inset-top), 7px);
margin-right: 12px;
flex-flow: column nowrap;
box-sizing: border-box;
display: flex;
place-content: center flex-end;
align-items: center;
}
.card-inner-wrapper {
width: 100%;
min-height: 150px;
border-radius: 14px;
padding-top: 10%;
background: linear-gradient(360deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 41.15%, rgba(34, 34, 34, 0) 100%);
opacity: 0.9;
position: relative;
z-index: 5;
} <div class="card">
<div class="card-inner-wrapper">
</div>
</div>