如何为卡片制作半边框？

Question

我想为卡片制作边框，它只在文本周围创建边框，但照片保持不变。

不幸的是，我尝试创建 div 并仅为照片下的文本制作边框，但它留下了与照片不连接的小部分。当我在 .section-pricing 上编写代码时，边框不仅涵盖文本，还涵盖照片，那么什么样的代码会在文本周围创建边框。

.section-pricing {
  padding: 4.6rem 0;
}

.subscription-img {
  width: 100%;
}

.subscription-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.subscription-attributes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
} 

.subscription-attribute {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.subscription-icon {
  height: 1.2rem;
  width: 1.2rem;
}

.subscription-title-seconday {
  margin-bottom: 1rem;
} 

.subscription {
  border: #c22020 solid 1px;
}

<section class="section-pricing">
  <div class="container">
    <h2 class="heading-secondary">Choose your experience</h2>
  </div>
  <div class="container grid grid--4-cols">
    <div class="subscription">
      <img
        src="img/excercises/subscription1.png"
        class="subscription-img"
        alt="first month subscription"
      />
      <p class="subscription-title">1 Month Membership</p>
      <p class="subscription-title-seconday">180/month</p>
      <ul class="subscription-attributes">
        <li class="subscription-attribute">
          <ion-icon
            class="subscription-icon"
            name="calendar-outline"
          ></ion-icon>
          <span>Commitment period: month</span>
        </li>
      </ul>
    </div>
    <div class="subscription">subscription</div>
    <div class="subscription">subscription</div>
    <div class="subscription">subscription</div>
  </div>
</section>

Answer 1

您能否提供有关您想要实现的目标的更多详细信息？

尚不完全清楚，尤其是提到卡片的半边框。更详细的解释将帮助我们更好地理解您的请求并提供您需要的帮助。

请提供更多信息，以便我们有效地为您提供帮助。