How to create a container with rounded corners inside?

Question

I need to create something like this in Html + CSS.

I think it's possible to make it in at least 2 ways:

1) Create the box with 4 rectangles and 4 rounded corners (it's more code, but it will be easy to fix position if I want to scroll background content).

2) Just create a background with that color and create a container in the center with scroll javascript in that div.

WWYD or is there another easier way?

P.S. On top of page, logo (left), buttons/pictograms (center) and profile (right) - I might add another container for it.

Answer 1

You can simply use 2 divs with a border and radius for the inner one. See here:

#inside {
  border: 5px solid grey;
  padding: 10px;
  border-radius: 25px;
  height: 200px;
  background: grey;
}

#outside {
  border: 5px solid grey;
  padding: 10px;
  background: black;
}

<div id="outside">
  <div id="inside">
  </div>
</div>

Answer 2

if you do not want to use 2 DOM use pseudo element :before

body{
padding: 15px;
}
div{
height:120px;
width:150px;
background-color:black;
border-radius:20px;
position:relative;
}

div:before{
    content: '';
    position: absolute;
    height: 126%;
    width: 120%;
    background-color: red;
    z-index: -1;
    position: absolute;
    top: -13%;
    left: -10%;
}

<div></div>