9 replies

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;
}

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

KP-C

Kevin Powell - Community•2y ago•

9 replies

bovine

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

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

Border radius and backgrounds

Border radius and backgrounds

Similar Threads

Similar Threads

Similar Threads