画像をトリミングする方法について

Question

画像をトリミングする方法について

前提

slickを使用してスライドショーになっている部分の画像を、トリミングしたいです。
（左側だけ角丸）

発生している問題・エラーメッセージ

<main>
   <div>
        <ul class="slider">
          <li>
            <picture>
              <source media="(max-width: 768px)" type="image/webp" srcset="./assets/img/●●.webp">
              <source media="(max-width: 768px)" srcset="./assets/img/●●.png">
              <source type="image/webp" srcset="./assets/img/●●.webp">
              <source srcset=".assets/img/●●.png">
              <img src="./assets/img/●●.jpg" alt="slide1">
            </picture>
          </li>
          <li>
          </li>
以下省略

試したこと

・imgにborder-radius
・親要素（picture、li）にoverflow：hidden
・clip-pathを設定

ただのimgであれば出来るのですが、
・slickを使用している
・webpを使用している（pictureやsourceタグだからimgでは効かないのでしょうか？）
の場合はどうすれば角丸にトリミングできるのか教えてほしいです。

補足情報

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、『imgにborder-radius』で問題なさそうでしたので、再度お試しになってはどうでしょうか。

[f_e_beginner]

出来ました！ありがとうございます。

[Lhankor_Mhy]

ご解決されて何よりです。
お手数ですが、自己解決の処理をお願いします。

[f_e_beginner]

ありがとうございます。

Answer 1

imgにborder-radiusを再確認で解決しました。