Kevin Powell - Community•5mo ago

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

JeluxeOP•5mo 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;
}

JeluxeOP•5mo ago

hope you can see it

Rowe2ry•5mo 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•5mo 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•5mo 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):

JeluxeOP•5mo 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•5mo 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•5mo 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

JeluxeOP•5mo 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•5mo ago

Can you throw your code into a codepen ?

JeluxeOP•5mo ago

well i tried to make it as fast as i can https://codepen.io/jeluxe/pen/zYVpyee?editors=1100

Jeluxe

CodePen

zYVpyee

...

Gaming

Programming

weird border-radius behavior

Did you find this page helpful?