CODEWITHSUNDEEP
cssrounded-corners
user5613506
user5613506

Reputation: 286

Unusual rounded corners markup

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?

Upvotes: 0

Views: 206

Answers (1)

user5613506
user5613506

Reputation: 286

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 :)

Upvotes: 0

Related Questions