Border-Radius on Two Overlapping Elements; Background Shines Through

Border-radius on two overlapping elements; background shines through

An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).

then:

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000 url("/path/to/image') repeat-y 0 0;
  cursor: pointer;
}

I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.

var prcnt = (YOURPERCENTAGE/100)* 366;

border-radius shows slight color from parent div background in corners

An easy fix would be to make the outer element have a large radius than the inner for only the top portion

body {
  background: #000;
}

.outer, .outer2 {
  width: 200px;
  height: 100px;
  border-radius: 15px 15px 5px 5px;
  background: #fff;
  margin-bottom: 20px;
}

.inner, .inner2 {
  background: #111;
  width: 100%;
  height: 50px;
  border-radius: 5px;
}

Edit: It's happening because that is how the browser renders it. Not all browsers will produce the same result.

Two overlapping oval shapes - visible artifacts

1. you need overflow: hidden
2. you need a 3rd inner div which adds the border (Just think of an independent border that stacks i top of the others)

BTW: Don't id everthing. Use classes. Use id only if you need to. And try not the nest ids.

As a rule of thumb I use only class for CSS and idfor JS only

http://jsfiddle.net/Lt4x3ufg/1/

.login_form {    margin-left:auto;    margin-right:auto;        position: relative;    width: 200px;    height: 200px;    background: red;    border:1px solid red;    border-radius: 10px;    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    overflow: hidden;}.login_form .border {    position: absolute;    top: -1px;    right: -1px;    bottom: -1px;    left: -1px;    border: 1px solid red;    border-radius: 10px;}.login_form .white_ovale { position: absolute; right: -10px; bottom: -10px;    width: 125px;    height: 80px;    background: white;    -webkit-border-radius:                225px 0px 7px 0px / 150px 0px 7px 0px;     -moz-border-radius:               225px 0px 7px 0px / 150px 0px 7px 0px;     border-radius:               225px 0px 7px 0px / 150px 0px 7px 0px; }
.login_form .green_ovale { position: absolute; right:  -21px; bottom: -21px;    width:  139px;    height: 75px;    border: 0px;    background: #72B038;
    -webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;        -moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;             border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px; 
    -webkit-box-shadow: inset -10px -10px 0px 10px white;    -moz-box-shadow: inset -10px -10px 0px 10px white;         box-shadow: inset -10px -10px 0px 10px white;}

<div class="login_form">    <div class="white_ovale"></div>    <div class="green_ovale"></div>    <div class="border"></div></div>

Background of parent leaking when child's border radius is the same

You can change the CSS to obtain a similar layout without this issue:

#outer {  width: 200px;  height: 200px;  background:   linear-gradient(to bottom,steelblue 50px,white 0);  border-radius: 20px;}

body {  background-color: steelblue;}

<div id="outer"></div>

How to make a background color not overlap a border?

Simply add overflow:hidden to #container

Demo Fiddle

Note you can also accomplish what you want in a far simpler way:

Demo Fiddle

HTML

<div id="container">
    <div id="column2">Column 2</div>
    <div id="column1">Column 1</div>
</div>

CSS

#container {
    border:5px solid #990000;
    overflow:hidden;
    border-radius:10px;
}
#column1 {
    background-color: cyan;
    overflow:hidden;
}
#column2 {
    background-color: lime;
    float: right;
    width: 200px;
}

---

Related Topics