weird border-radius behavior

import React from 'react';
import "./Cards.css"


const Cards = () => {
  return (
    <div className='container'>
      <h1>Cards</h1>
      <div className='cards'>
        <div className='card card-one'>
          <div className="card-img" />
          <div className="card-content">
            <div className='card-category'>Action</div>
            <h1 className="card-title">My Title Over Here</h1>
            <div className="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. isi eum animi omni</div>
            <button>Press Me</button>
          </div>
        </div>
        <div className='card card-two'>
          <div className="card-img" />
          <div className="card-content">
            <h1 className="card-title">My Title Over Here</h1>
            <div className='card-category'>Action</div>
            <div className="card-description">
              <h3>Description:</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div className='card card-three'>
          <div className="card-img" />
          <div className="card-content">
            <div className='card-category'>Action</div>
            <h1 className="card-title">My Title Over Here</h1>
            <div className="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, nemo.</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Cards