How to curve the outside of a rectangle in CSS?

I have a website which uses a SAAS CMS, so I cannot change the HTML structure, but I do have the ability to add some custom css. I want the header and footer to have upward and downward curves. Can this be achieved in CSS alone? I have tried using border-radius but it seems only good for perfect circles, not obscure shapes.

I made a codeply for it here.

Using Bootstrap, here's my HTML:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.navbar-top {
background-color: blue;
}
.navbar-bottom {
background-color: red;
}

<!-- language: lang-html -->

<!-- bootstrap nav -->
<nav class="navbar navbar-top navbar-expand-md">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">More</a></li>
<li class="nav-item"><a href="#" class="nav-link">Options</a></li>
</ul>
</nav>
<div class="container">
<div class="main-content">
<p>main elements are here</p>
<!-- main elements go here-->
</div>
</div>
<!-- /bootstrap nav -->
<nav class="navbar navbar-bottom navbar-expand-md fixed-bottom">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">More</a></li>
<li class="nav-item"><a href="#" class="nav-link">Options</a></li>
</ul>
</nav>

<!-- end snippet -->

To achieve this, try using this code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.navbar {
justify-content: flex-start;
}
.navbar-nav {
flex-direction: row !important;
}
.navbar-top {
background-color: blue;
}
.navbar-bottom {
background-color: red;
}
.main {
border-top-left-radius: 10%;
border-bottom-right-radius: 10%;
background: #fff;
position: relative;
min-height: calc(100vh - 112px);
padding: 20px;
}
.main:before {
position: absolute;
content: '';
top: 0;
left: 0;
background-color: blue;
width: 100%;
height: 50%;
z-index: -1;
}
.main:after {
position: absolute;
content: '';
bottom: 0;
right: 0;
background-color: red;
width: 100%;
height: 50%;
z-index: -1;
}

<!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- bootstrap nav -->
<nav class="navbar navbar-top navbar-expand-md">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">More</a></li>
<li class="nav-item"><a href="#" class="nav-link">Options</a></li>
</ul>
</nav>
<main class="main">
<div class="container">
<div class="main-content">
<p>main elements are here</p>
<!-- main elements go here-->
</div>
</div>
</main>
<!-- /bootstrap nav -->
<nav class="navbar navbar-bottom navbar-expand-md fixed-bottom">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">More</a></li>
<li class="nav-item"><a href="#" class="nav-link">Options</a></li>
</ul>
</nav>

<!-- end snippet -->

To curve the outside of a rectangle in CSS, you can use the border-radius property. The border-radius property allows you to set rounded corners for an element, thereby curving the outer edges of the rectangle.