KPC
Kevin Powell - Community•3mo ago
Jeluxe

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
11 Replies
Jeluxe
Jeluxe•3mo ago
Here is my card css file: 
.container {
  display: grid;
  padding: 3rem;
}

.container>h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}

.cards .card {
  width: 300px;
  min-height: 400px;
  overflow: hidden;
  background: hsl(from #fff h s 95%);
}

.card-one {
  --spacing: 1.5rem;
  --gap: 1rem;
  --radius: .5rem;

  color: var(--clr-neutral-900);
  border-radius: var(--radius);
  isolation: isolate;
}

.card-one .card-img {
  height: 160px;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
  // background:linear-gradient(90deg, rgba(0, 0, 255, 0.689), rgba(255, 192, 203, 0.705))
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-one .card-content {
  display: grid;
  gap: var(--gap);
  padding: var(--spacing);
}

.card-one .card-category {
  font-size: var(--fs-300);
  letter-spacing: .35rem;
  text-transform: uppercase;
}

.card-one .card-title {
  letter-spacing: .15rem;
}

.card-one .card-description {
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: .02rem;
}

.card-one button {
  position: relative;
  background: hsl(250, 60%, 15%);
  color: var(--clr-neutral-100);
  border: 0;
  border-radius: .25rem;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: .15rem;
  cursor: pointer;
}

.card-one button::after {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  inset: 0;
  translate: 0 .35rem;
  filter: blur(6px);
  opacity: .5rem;
}

.card-one button:is(:hover, :focus) {
  background: linear-gradient(90deg, orange, rgb(226, 103, 123) 70%)
}


.card-two {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  background: transparent;
}

.card-two .card-img {
  height: 100%;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
}

.card-two .card-content {
  padding: 1.5rem;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
}
.container {
  display: grid;
  padding: 3rem;
}

.container>h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}

.cards .card {
  width: 300px;
  min-height: 400px;
  overflow: hidden;
  background: hsl(from #fff h s 95%);
}

.card-one {
  --spacing: 1.5rem;
  --gap: 1rem;
  --radius: .5rem;

  color: var(--clr-neutral-900);
  border-radius: var(--radius);
  isolation: isolate;
}

.card-one .card-img {
  height: 160px;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
  // background:linear-gradient(90deg, rgba(0, 0, 255, 0.689), rgba(255, 192, 203, 0.705))
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-one .card-content {
  display: grid;
  gap: var(--gap);
  padding: var(--spacing);
}

.card-one .card-category {
  font-size: var(--fs-300);
  letter-spacing: .35rem;
  text-transform: uppercase;
}

.card-one .card-title {
  letter-spacing: .15rem;
}

.card-one .card-description {
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: .02rem;
}

.card-one button {
  position: relative;
  background: hsl(250, 60%, 15%);
  color: var(--clr-neutral-100);
  border: 0;
  border-radius: .25rem;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: .15rem;
  cursor: pointer;
}

.card-one button::after {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  inset: 0;
  translate: 0 .35rem;
  filter: blur(6px);
  opacity: .5rem;
}

.card-one button:is(:hover, :focus) {
  background: linear-gradient(90deg, orange, rgb(226, 103, 123) 70%)
}


.card-two {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  background: transparent;
}

.card-two .card-img {
  height: 100%;
  background: linear-gradient(0deg, rgba(2, 2, 98, 0.955), rgb(1, 1, 1) 80%);
}

.card-two .card-content {
  padding: 1.5rem;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
}
Jeluxe
Jeluxe•3mo ago
hope you can see it
No description
Rowe2ry
Rowe2ry•3mo ago
I'm currently trying to get an example of your code up on codepen but it's not looking right I was going to try the suggestion mentioned here: https://css-tricks.com/forums/topic/border-radius-ugliness/
fooman
CSS-Tricks
[Solved] Border Radius Ugliness - CSS-Tricks
I'm sure this is common and a dumb mistake on my part, but does anyone know why the rounded radius on the corner has a gross light line on the very edge?
Rowe2ry
Rowe2ry•3mo ago
feel free to play around with this https://codepen.io/Chris-Rowe/pen/rNEpQPz I had to change all of your className to basic html with double quote values so you can't copy/paste back into react wasn't sure why you were using the img tag with an empty source. You can just put the linear gradient right on the card
Rowe2ry
Rowe2ry•3mo ago
The code (note I make the hover content element have a border radius - 1px) 
.card-two:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .7);
  border-radius: calc(var(--radius) - 1px);
}
.card-two:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .7);
  border-radius: calc(var(--radius) - 1px);
}
The result (still not perfect, but cleaner looking than before):
No description
Jeluxe
Jeluxe•3mo ago
well it seems like if i just used real image, it would solve everything... also the solution from the forum was only partially solution, because when you move to mobile view, well let's say it is getting even worse. (i updated my code, sorry i wasn't explaining properly...) and your solution is nice but in case you only want the "img" to be only part of height, then you can't really use it as background well i still trying to understand what made this issue to appear, but anyway i want to thank you for you help.
capt_uhu
capt_uhu•3mo ago
the term that I've heard used for this over the years is "border-radius bleed". It's an issue in all browsers. Here's the 13 year old Firefox bug as an example: https://bugzilla.mozilla.org/show_bug.cgi?id=664154 I remember there being a nice long stack overflow post about this but I can't find it right now. This is the best I can find for solutions right now: https://dev.to/rashidshamloo/css-fixing-background-color-bleed-in-rounded-corners-2kh4 although the most obvious solution that I came a cross at one point was just using a slightly different border-radius on the child element to cover up the issue just remembered I also worked around this at one point by using a clip-path: inset(0 round 12px); on the parent so that both the parent and child element got rounded in one pass.
clevermissfox
clevermissfox•3mo ago
If you make the img slightly larger than its container , remove its border radius , the overflow hidden on the parent will clip anything outside its padding-box. Or use a bg image ? Depending on if img is decorative or necessary context. I haven’t looked closely at the code but I see you’re using grid, if the element is stretching it might throw off border radius
Jeluxe
Jeluxe•3mo ago
If it is img then this issue disappears, the problem appears when you try to do it with div or something like that, and i didn't had image so i thought of using for now a colored div, and then that issue appeared Interesting solution
clevermissfox
clevermissfox•3mo ago
Can you throw your code into a codepen ?
Jeluxe
Jeluxe•3mo ago
well i tried to make it as fast as i can https://codepen.io/jeluxe/pen/zYVpyee?editors=1100
Jeluxe
CodePen
zYVpyee
...
Want results from more Discord servers?
Add your server