Hi,
I have been trying to find a solution without success. I aware of CSS curved borders, however what I am trying to achieve is a long curve at the bottom of a background colour via CSS, like what’s on the screenshot.
Many thanks!
Have a play around with the following:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-icons.css" />
<style>
.curved-bottom {
/* Curved corners */
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
}
</style>
</head>
<body>
<main class="bg-light">
<div class="container-fluid">
<div class="row fw-bolder curved-bottom bg-primary">
<div class="col">
<h1 class="text-light pb-5">Fancy display heading</h1>
</div>
</div>
</div>
</main>
<footer class="bg-light">
<div class="container">
<div class="row bg-light">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light p-0">
<span class="navbar-text p-2 d-none d-sm-block d-md-block small"><i class="fa fa-map-marker"></i> 1234 Street Name, City Name</span>
<span class="navbar-text p-2 small"><i class="fa fa-phone"></i> (800) 123-4567</span>
<span class="navbar-text p-2 d-none d-sm-block d-md-block small"><i class="fa fa-envelope"></i> mail@example.com</span>
<span class="navbar-text p-2 d-none d-sm-block d-md-block small ms-auto">Blog</span>
</nav>
</div>
</div>
</div>
</footer>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Thanks Ben!! Exactly what I was looking for. Perfect. 
1 Like