This question might sound weird, but here's the code: 

```css
body{
    background-color: rgba(38, 38, 38, 1);
}
.inside-box {
    border: 15px solid rgba(38, 38, 38, 1);
    height: 95vh;
    border-radius: 25px;
    background: rgba(26, 26, 26, 1);

  }

.outside-box {
    background: rgba(38, 38, 38, 1);

  }
  .flex-container-top {
    height: 5vh;
    background-color: red;
  }
```

```html
<div class="flex-container-top">     
    </div>
    <div class="outside-box">
     <div class="inside-box"></div>
    </div>
```

Sorry I don't know how to show code here properly, but what I have is this:

[what i have](https://i.stack.imgur.com/kMT3B.png)

[what i want](https://i.stack.imgur.com/aaDfY.png)

Don't worry a lot about sizes, I just want to know to have something over another.