I’m trying to apply two different background colors to a subscription card. They are being applied correctly using ::before and ::after pseudo-elements, but the issue is that I want to apply a border radius to the end of the first background. I’ve tried multiple methods, but I’m still unable to apply it. Is there a way to achieve this? Thanks.

My currenct card:

Required:

 <div className={styles.footer_first_box}>
        <div className={styles.footer_first_box_inner}>
          <span className={styles.footer_first_box_heading}>Subscribe</span>
          <span className={styles.footer_first_box_content}>
            To get latest information from us, and updated news.
          </span>
          <div className={styles.email_btn_div}>
            <input
              name="email"
              id="email"
              type="text"
              className={styles.footer_email_input}
              placeholder="Enter your email"
            />
            <button className={styles.footer_primary_button}>Subscribe</button>
          </div>
        </div>
      </div>

Scss:

 .footer_first_box {
  width: 80%;
  height: 100%;
  background-color: #17005a;
  border-radius: $font-size-medium;
  padding: 20px 40px 20px 40px;
  position: relative;

  @media (max-width: 640px) {
    width: 100%;
    padding: 20.15px;
    border-radius: 13.44px;
  }

  @media (min-width: 641px) and (max-width: 1024px) {
    width: 100%;
    padding: 20.15px;
    border-radius: 13.44px;
  }
}