I'm trying to build a simple layout with a box inside another, however, while the external box has all four corners rounded, the inner one has only those of the right side.
I'll add the basic markup I started with just to fullfill the SO requirements but it's much easier to see everything in action:
<div id="wrapper">
<div id="left">
<div class="placeholder">Placeholder</div>
</div>
<div id="main"></div>
</div>
The inner corners are not exactly rounded and although I know that the reason is because I didn't define any other borders for that element, if I do, in the end, I can't have all border 6px thick in a smooth way (outer gets thickier on the left).
The closest approach I achieved was this one, making both left borders, external and internal, 3px to have the desired 6px but the area near the corners are clearly thinner, which is not what I had in mind.
As an extra, more as curiosity, when I tried to round the left inner borders as well, I ended up messing everything, with a space closer to ther cornerrs. Why is this?
Although I'm not the biggest fan of relative/absolute positioning, using them in this case seemed to be what I needed to solve the problem:
body {
background-color: #000;
margin: 35px 35px 35px 50px;
}
#wrapper {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border: 6px solid #0A1818;
margin-left: 20px;
min-height: 500px; /* demo only */
position: relative;
z-index: 1;
}
#left {
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: #051113;
border: 6px solid #0A1818;
left: 35px;
min-height: 500px; /* demo only */
position: absolute;
text-align: center;
width: 30%;
z-index: 2;
}<div id="left">
<div class="placeholder">Placeholder</div>
</div>
<div id="wrapper">
<div id="main"></div>
</div>I hope it helps someone in the future :)