Jeluxe Posts - Answer Overflow

Jeluxe

•Created by Jeluxe on 8/16/2024 in #front-end

weird border-radius behavior

i have created card in vite-react and i dont see something that have caused this issue, and the issue is that so i have image that take all of the size of the card and for some reason at thhe edges of the card, the card background is slightly visible like 0.0001px. like between the img's edge and the card's edge the is small gap, which i cant find the cause. Here card file:

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

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

20 replies

Gaming

Programming