Kevin Powell - Community•6mo ago

Border radius and backgrounds

So this is a fairly common question. If you have an element that has a 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 to the parent. And that works. Until you need to do things that 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 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 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;
}

<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.

8 Replies

Mannix•6mo ago

applying the border-radius on the child aswell ??

Chris Bolson•6mo ago

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. 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•6mo ago

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)

Chris Bolson

CodePen

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

...

Chris Bolson•6mo ago

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.

bovineOP•6mo ago

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•6mo ago

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•6mo ago

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•6mo ago

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.

Gaming

Programming

Border radius and backgrounds