ckoshien

imgタグで<code>border-radius</code>を指定すると、 
透過pngの場合のみborder-radiusで切り取った箇所の下の要素が見えなくなる(透過される)問題 
jpegの場合は問題なく見える。
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx">&lt;img
 style={{
 width: 340,
 height: 450,
 objectFit: "cover",
 borderBottomLeftRadius:'880px 400px',
 borderTopRightRadius:'880px 400px'
 }}
 src={"/images/baseball_batter_man.png"}
 /&gt;
</code></pre></div><h2 id="%E6%9A%AB%E5%AE%9A%E5%AF%BE%E5%87%A6">
<a class="header-anchor-link" href="#%E6%9A%AB%E5%AE%9A%E5%AF%BE%E5%87%A6" aria-hidden="true"></a> 暫定対処</h2>
<ul>
<li>pngをjpgに変換する</li>
</ul>
<h2 id="%E9%96%A2%E9%80%A3stackoverflow">
<a class="header-anchor-link" href="#%E9%96%A2%E9%80%A3stackoverflow" aria-hidden="true"></a> 関連stackoverflow</h2>
<ul>
<li><a href="https://stackoverflow.com/questions/4052295/css3-border-images-transparent-png-issue" target="_blank" rel="nofollow noopener noreferrer">https://stackoverflow.com/questions/4052295/css3-border-images-transparent-png-issue</a></li>
</ul>