Home/ Questions/Q 9064097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T16:09:45+00:00

I’m trying to design a website in which the main content container has rounded

  • 0

I’m trying to design a website in which the main content container has rounded corners using the border-radius property. However, I am keeping a sidebar and a topside navbar fixed so they don’t move when a user scrolls up or down. It’s similar to what can be seen on Google Plus:

http://www.techzek.com/wp-content/uploads/gsmarena_00121.jpg.

My question is: How do I set a border-radius for a content-container with a z-index value less than the other elements so that the rounded corners are not overlapped and hidden by other elements when a user scrolls?

In the following example, I’d like the corner where the navbar and sidebar meet to be curved, but can’t figure out how

HTML:

<body>
    <div class="navbar">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Sign In</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <div class="sidebar"></div>

    <div class="contentcontainer"></div>
</body>

CSS:

html, body {
    background-color: #eee;
    height: 100%;
}

.navbar {
    position:fixed;
    width:100%;
    height:50px;
    display:inline;
    z-index:2;
    background: rgb(61,40,77);
}

.navbar ul{
    float:right;
    display:block;
    padding-top:14px;
    padding-right:10px;
}

.navbar li {
    padding:15px;
    display:inline;
}

.sidebar {
    position:fixed;
    height:100%;
    margin-top:50px;
    width:170px;
    background: rgb(61,40,77);
    color: #eee;
}

.contentcontainer {
    position:absolute;
    margin-left:200px;
    margin-top:65px;
    z-index:1;
    width:82%;
    max-width:980px;
    background-color:#fbfbfb;
    border-style:solid;
    border-width:1px;
    border-color:black;
    border-radius:18px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is this what you want? Codepen

    Here’s the trick. You make a circle with border-radius. You place it in the intersection berween the nav and the sidebar. Set border-color: transparent and get some shadow to set the color.

    .sidebar:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 0px;
  right: -20px; /* negative (border-width * 2) */
  border-radius: 10px; /* same as border-width */
  border: 10px solid transparent;
  box-shadow: -10px -10px 0 rgb(61,40,77); /* first two values = negative border-width */
}
    • 0