可以看以下的程式碼和截圖，或者看codepen範例：https://codepen.io/rochelwang1205/pen/LYMQMMP

1. 個別設定的方式：

<div class="container container1"> <img src="https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80" alt="Image" />
  <h3>個別設定的方式</h3>
</div>

.container1 {
  border: 2px solid #000;
  border-radius: 10px;
  width: 300px;
}
.container1 img {
  border-radius: 10px; /* Rounded corners for the image */
  width: 300px;
}

2. 利用border-radius + overflow:hidden的方法

<div class="container container2"> <img src="https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80" alt="Image" />
    <h3>border-radius + overflow:hidden</h3>
  </div>

.container2 {
  border: 2px solid #000;
  border-radius: 10px;
  overflow: hidden; /* 將內容裁切到容器的圓角形狀 */
  width: 300px;
}
.container2 img {
  width: 100%; /* 確保圖片填滿容器 */
}

3. 利用偽元素::after

<div class="container container3">
    <img src="https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80" alt="Image" />
    <h3>偽元素::after</h3>
  </div>

.container3 {
  position: relative;
  width: 300px;
  overflow: hidden;
}
.container3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 20px;
  opacity: 0.5;
  z-index: 1;
}
.container3 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  position: relative;
  z-index: 2;
}

4. 利用偽元素::before

<div class="container container4">
    <img src="https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80" alt="Image" />
    <h3>偽元素::before</h3>
  </div>

.container4 {
  position: relative;
}
.container4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: 2px solid #000;
  border-radius: 10px;
  z-index: -1;
}
.container4 img {
  display: block;
  width: 300px;
  outline: 2px solid #000;
  border-radius: 10px;
}

5. 設置background-image

<div class="container container5">
    <h3>background-image</h3>
  </div>
</div>

.container5 {
  background-image: url(https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80);
  background-size: cover;
  background-position: center;
  border: 2px solid #000;
  border-radius: 10px;
  width: 300px;
}
.container5::before {
  content: "";
  display: block;
  padding-top: 100%; /* 保持容器的長寬比例 */
}

各個方法的優缺點

1. 使用 overflow: hidden 和 border-radius 組合：
   • 優點：
     • 簡單且易於理解，只需在容器上設置兩個屬性。
     • 可以直接應用於圖片容器，不需要額外的元素或背景圖片。
   • 缺點：
     • 當圖片本身具有透明度或背景時，可能無法正確顯示圓角效果。
     • 需要注意容器的寬高比例，以避免圖片變形。
2. 使用偽元素（::before 或 ::after）：
   • 優點：
     • 可以實現較複雜的圓角效果，例如不同圓角半徑或漸變效果。
     • 可以較好地處理透明度或背景的情況，不會影響圖片本身。
   • 缺點：
     • 需要額外的偽元素，code量變多。
     • 需要注意偽元素的定位和層級，以確保圖片正確顯示在其上方。
3. 使用背景圖片：
   • 優點：
     • 可以實現較為複雜的圓角效果，同時保持圖片的背景和透明度。
     • 可以輕鬆控制圖片的大小和位置，以及容器的寬高比例。
   • 缺點：
     • 需要將圖片作為背景圖片，無法直接在 HTML 中使用 img 標籤。
     • 背景圖片可能會受到容器尺寸變化的影響而變形。

以上就是幾個可以將卡片切圓角(含圖片)的方法，至於要用哪種方法，優缺點也簡單的在上面描述了。

參考資料：

1. border-radius is a no-go：https://css-tricks.com/almanac/properties/b/border-image-source/#aa-border-radius-is-a-no-go
2. How To Add Border Images and Gradient Borders with Pure CSS：https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css?utm_medium=content_acq&utm_source=css-tricks&utm_campaign=&utm_content=awareness_almanac
3. chatGPT