Inner border that sits on top of content of the whole page-CodePudding

I need to create a layout that has an inner border around the whole page that sits on top of the content like below.

So far I have

body::before {
    border: 2px solid black;
    border-radius: 22px;
    content: '';
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 1;
}

But that only extends to the height of the window, it doesn't extend to cover the whole of the page's content.

Some of the different sections of the page need to extend to the full width of the window so I can't wrap the whole page in a div and apply border styles to that, the element with the border needs to sit on top of everything else.

Any ideas on how to do that?

CodePudding user response：

Easiest way I have found is to create an element that sits over the others on your site:

    <div >
       <div ></div>
    </div>

And then add the appropriate styling:

.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 99;
}
.overlay-border{
    border-radius: 10px;
    border: 5px solid #111;
    width: 100%;
    height: 100%;
}

The "z-index: 99" might need to be increased if you start allocating z-index to other elements. "pointer-events: none" ensures that website users can still click on links and other elements behind the overlay.

You can also change "position: absolute" to "position: fixed" if you would like this overlay across the whole window.

And then if you want the overlay across the entire page you can add this simple javascript:

    var body = document.body,
    html = document.documentElement;
    var height = Math.max(body.scrollHeight, body.offsetHeight,
    html.clientHeight, html.scrollHeight, html.offsetHeight);
    document.querySelector('.overlay').style.height = height   'px';

I am sure there is a better way to do this, however, this was just in the interim as I found my solution and I look forward to seeing the easier ways to do this :)