css how to align inner div border radius with outer div border radius

0
votes

.outerdiv {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #646464;
  background-color: yellow;
  padding-left: 10px;
  margin-top: 10px;
  height: 200px;
}

.innerdiv {
  -webkit-border-radius: 0px 10px 10px 0px;
  -moz-border-radius: 0px 10px 10px 0px;
  border-radius: 0px 10px 10px 0px;
  background-color: white;
  height: 200px;
}
<div class="outerdiv">
  <div class="innerdiv">
  </div>
</div>

I am trying to achieve as in the attached image.

I have outer div with yellow background and border radius of 10 and padding-left:10px to show the yellow strip on the left.

i am creating inner div with only top right and bottom right border radius. but i am getting yellow color on the right corners.

enter image description here

3
htmlcss
The effect is hardly noticeable (and with your code as shown doesn’t occur at all, because you specified an invalid background-color value; next time please create an actual minimal reproducible example); doesn’t seem to occur if you do it like this instead, put a 10px wide border-left on the inner div, and cut of the overflow for the outer: jsfiddle.net/cxo3gfgz (Or a border-radius of 9px for the inner div, if you can’t cut overflow, jsfiddle.net/cxo3gfgz/1) – CBroe

3 Answers

1
votes

reduce the border-radius of the innerdiv and one thing you don't need to use browser specified prefix to border-radius

.outerdiv {
  border-radius: 10px;
  border: 5px solid #646464;
  background-color: yellow;
  padding-left: 10px;
  margin-top: 20px;
  height: 100px;
}

.innerdiv {
  border-radius: 0px 6px 6px 0px;
  background-color: white;
  height: 100px;
  width: 100%;
}
<div class="outerdiv">
  <div class="innerdiv">
    Testing
  </div>
</div>
0
votes

It's because of the border-radius at the .innerdiv, try giving it a smaller radius

.outerdiv {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 5px solid #646464;
  background-color: yellow;
  padding-left: 10px;
  margin-top: 10px;
  height: 500px;
}

.innerdiv {
  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
  background-color: white;
  height: 500px;
  width: 100%;
}
<div class="outerdiv">
  <div class="innerdiv">
    Testing
  </div>
</div>
0
votes

I guess, to achieve exactly as per your image, you might need 3 divs, then only you can get it. Check below snippet,

.outer{
  width:200px;
  height:100px;  
  background-color:#000; 
  padding:5px;
}
.inner{    
  width:190px;
  height:100%;  
  padding-left:10px;  
  background-color:yellow;
  border-radius:5px;
}
.deep{
  width:100%;
  height:100%;
  background-color:#fff;
  border-radius:0 5px 5px 0;
}
<div class="outer">
  <div class="inner">
    <div class="deep">
    
    </div>
  </div>
</div>

Hope it helps.