How to make a rounded top margin in footer using bootstrap?

I want to make a footer rounded at top left and right corners. I'm using inline style currently to check if everything working fine. But it's not working to make it look rounded. I'm using Bootstrap 5 and custom inline style. This is my code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
</head>
<body>
    <div class="container">

        <!--HEADER-->
        <header class="row">
            <nav class="navbar navbar-dark bg-primary fixed-top col-12" style="border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">
                    <h1 class="navbar-brand mb-2 mt-2 h1 mx-auto text-center">XYZ</h1>
            </nav>
        </header>
        <!--HEADER-->

        <!--CONTENT-->

        <!--CONTENT-->
        

        <!--FOOTER-->
        <footer class="fixed-bottom bg-primary row text-center" style="border-top-right-radius: 10px; border-top-left-radius: 10px;">
          <div class="col-md-6 text-center">
            <a href="/privacy" class="text-decoration-none text-dark hover:text-primary">Privacy Policy</a>
          </div>
          <div class="col-md-6">
              &copy; XYZ 2023
          </div>
        </footer>
        <!--FOOTER-->
    </div>

</body>
</html>

Solution

You're not seeing the rounded corders because the row has negative margins. Instead place the row inside the footer...

https://codeply.com/p/3p1DdoBjNX

   <footer class="fixed-bottom bg-primary text-center" style="border-top-right-radius: 10px; border-top-left-radius: 10px;">
        <div class="row">
            <div class="col-md-6 text-center">
                <a href="/privacy" class="text-decoration-none text-dark hover:text-primary">Privacy Policy</a>
            </div>
            <div class="col-md-6"> &copy; XYZ 2023 </div>
        </div>
   </footer>