Border radius and backgrounds

So this is a fairly common question.

If you have an element that has a

border-radius

border-radius

and then a child within that which has a background this will not overflow the parent's border radius. As the image shows, there's no curves on the top corners.

The common answer is add

overflow: hidden

overflow: hidden

to the parent. And that works.

Until you need to do things that

overflow: hidden

overflow: hidden

will screw up. For example you need to absolute position an element outside of the parent's space, or maybe you need scrollbars.

The other alternative is to add

border-radius

border-radius

to the child. This will also work, perhaps with some bleeding with you can tweak out.

In my case I need to absolute position something so

overflow: hidden

overflow: hidden

is a no-go, and additionally as the content is dynamic I can't be sure if the child element wit a background will be at the parent element's edge or not - thus border radius can't be applied to the child.

What other options are there?

A very simple example below.

https://jsfiddle.net/wcbjo9uf/

#parent {
  background: red;
  border-radius: 10px;
  height: 200px;
  width: 200px;
  position: relative;
}

#child {
  background: blue;
  color: white;  
}

#positioned {
  position: absolute;
  left: 110%;
  width: 150px;
  background: green;
  color: white;
  top: 0;
}

#parent {
  background: red;
  border-radius: 10px;
  height: 200px;
  width: 200px;
  position: relative;
}

#child {
  background: blue;
  color: white;  
}

#positioned {
  position: absolute;
  left: 110%;
  width: 150px;
  background: green;
  color: white;
  top: 0;
}

#parent {
  background: red;
  border-radius: 10px;
  height: 200px;
  width: 200px;
  position: relative;
}

#child {
  background: blue;
  color: white;  
}

#positioned {
  position: absolute;
  left: 110%;
  width: 150px;
  background: green;
  color: white;
  top: 0;
}

#parent {
  background: red;
  border-radius: 10px;
  height: 200px;
  width: 200px;
  position: relative;
}

#child {
  background: blue;
  color: white;  
}

#positioned {
  position: absolute;
  left: 110%;
  width: 150px;
  background: green;
  color: white;
  top: 0;
}

<div id="parent">
  <div id="child">Some content</div>
  <div id="positioned">I'm outside!</div>
</div>

<div id="parent">
  <div id="child">Some content</div>
  <div id="positioned">I'm outside!</div>
</div>

<div id="parent">
  <div id="child">Some content</div>
  <div id="positioned">I'm outside!</div>
</div>

<div id="parent">
  <div id="child">Some content</div>
  <div id="positioned">I'm outside!</div>
</div>

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Mannix•6/14/24, 1:26 PM

applying the border-radius on the child aswell ??

Chris Bolson•6/14/24, 1:35 PM

I'm not sure that this is possible

You might have to wrap the child that needs to remain inside the parent inside another element.

Chris Bolson•6/14/24, 1:42 PM

A bit of a hack but you could use a pseduo element on the parent that extended outside of the parent and had a white (or same color as the background) border and no background color. If you give this a border-radius larger than your parent and a higher z-index than the content that needs to stay inside the box you could get this to work.

Chris Bolson•6/14/24, 1:48 PM

https://codepen.io/cbolson/pen/NWVwVxb
(I switched to codepen because I find it much easier and faster to use than jsfiddle, just a personal preference)

CodePenChris Bolson

https://discord.com/channels/436251713830125568/1251164893944484021...

...

Chris Bolson•6/14/24, 1:49 PM

I don't think that I would want to use this solution. Maybe with custom properties it could become a bit more flexible.

Hopefully somebody else might be able to suggest a more elegant solution. I have probably missed something obvious.

MMannix applying the border-radius on the child aswell ??

bovineOP•6/14/24, 1:54 PM

Please read the description. I already stated this is not possible due dynamic content meaning the element may or may not appear at the parent's edge.

MarkBoots•6/14/24, 1:56 PM

i think it would be much more manageable to have a container around the child that has the border-radius, background, overflow, etc. so only use the #parent for the relative positioning of the #positioned one

Chris Bolson•6/14/24, 1:58 PM

I agree, I would go with a container too. But as bovine mentioned that they can't be sure of the content I suspect a certain lack of control over the HTML which might prevent them from being able to add a container.

bovineOP•6/15/24, 11:35 AM

Thanks for the replies. Yes, so the parent element contains multiple distinct child elements that are conditionally shown. Some have backgrounds, some don't. Thus one user might see a child with a background as their first element and another might not - hence not being sure which is first and thus I can't apply a border radius, as if it is the second element the border radius shouldn't be there.

Being distinct I am able to target these by their class names and determine if it is the first within the parent, however this is a high maintenance approach so was hoping maybe there would be a way that would not require such verbose rule selectors.