For some border radius cannot change size

Created by: mjablecnik

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

I want to create container with rounded corners on top but when I add rounded-5 class so there are rounded bottom corners instead of top:

My code is:

<div class="container py-3 my-3 border border-primary rounded-top rounded-5"><h1>This is a heading</h1><p>This is a paragraph of text.</p></div>

Reduced test cases

 <html>
  <head>
    <meta charset="utf-8">
    <title>bootstrap example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
	</head>

	<body>
		<hr>
			<div class="container py-3 my-3 border border-primary rounded-top rounded-5">
				<h1>This is a heading</h1>
				<p>This is a paragraph of text.</p>
			</div>
		<hr>
	</body>
</html>

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2.0-beta1