I am attempting to create a body border on my webpage with rounded corners at the top to simulate the MacOS interface in the browser, similar to the image shown here:
https://i.sstatic.net/ECSU9.jpg
The issue arises when I scroll, and the top corners vanish: https://i.sstatic.net/JoVKX.jpg
This is the HTML (although it's in React) that I have:
body:before,
body:after {
content: "";
position: fixed;
background: #900;
left: 0;
right: 0;
}
body:before {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 20px;
top: 0;
}
body:after {
bottom: 0;
height: 10px;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-left: 10px solid #900;
border-right: 10px solid #900;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}<div class="App">
<div class="App-header">
<span class="term-name">
Header Title
</span>
</div>
<div class="container">
<p></p>
</div>
</div>CSS is not my strong suit, and I am having difficulty figuring out how to achieve this...