One of many attention-grabbing (however annoying) issues about CSS is the background of youngsters’s components can bleed out of the border radius of the mum or dad aspect. Right here’s an instance of a card with an internal aspect. If the internal aspect is given a background, it will possibly bleed out of the cardboard’s border.
The simplest technique to resolve this drawback is so as to add overflow: hidden to the cardboard aspect. I’m certain that’s the go-to answer most of us attain for when this occurs.
However doing this creates a brand new drawback — content material exterior the cardboard aspect will get clipped off — so you’ll be able to’t use destructive margins or place: absolute to shift the youngsters’s content material out of the cardboard.
There’s a barely extra tedious — however simpler — technique to forestall a toddler’s background from bleeding out of the mum or dad’s border-radius. And that’s so as to add the identical border-radius to the kid aspect.
The simplest approach to do that is permitting the kid to inherit the mum or dad’s border-radius:
.youngster {
border-radius: inherit;
}If the border-radius shorthand is an excessive amount of, you’ll be able to nonetheless inherit the radius for every of the 4 corners on a case-by-case foundation:
.youngster {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}Or, for these of you who’re prepared to make use of logical properties, right here’s the equal. (For a better technique to perceive logical properties, exchange prime and left with begin, and backside and proper with finish.)
.youngster {
border-start-start-radius: inherit;
border-top-end-radius: inherit;
border-end-start-radius: inherit;
border-end-end-radius: inherit;
}Can’t we simply apply a background on the cardboard?
You probably have a background straight on the .card that accommodates the border-radius, you’ll obtain the identical impact. So, why not?
Effectively, typically you’ll be able to’t do this. One state of affairs is when you may have a .card that’s cut up into two, and just one half is coloured in.
So, why ought to we do that?
Peace of thoughts might be the perfect motive. On the very least, you realize you received’t be creating issues down the street with the radius manipulation answer.
This sample goes to be particularly useful when CSS Anchor Positioning beneficial properties full assist. I anticipate that might change into the norm popover positioning quickly in about 1-2 years.
That stated, for popovers, I personally want to maneuver the popover content material out of the doc circulate and into the <physique> aspect as a direct descendant. By doing this, I forestall overflow: hidden from chopping off any of my popovers once I use anchor positioning.
