Login/Register
How to make page border in print CSS for every single page
Asked Answered
Solved htmlcssprint-css
C

3

18

I have a long HTML to print. Page is ready for printing but I need to border every single page. I added body { border:2px #666 solid; padding:5px; } in CSS code. HTML view is nice but print view is not. Because border-bottom is not showing first page and border-top is not showing all other pages.

I hope, I can explain what I want. I'm searched and still searching for solution. And I think it's easy trick. But stil not found.

Caprice answered 23/6, 2014 at 8:30 Comment(1)
Long time ago, there was an option called marks. Unfortunately, its deprecated: developer.mozilla.org/de/docs/Web/CSS/marks – Technetium
I
6

Try this it will help you : It will make border on full screen.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Border around content</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #wrapper {
      position: absolute;
      overflow: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 5px solid red;
    }
  </style>
</head>
<body>
  <div id="wrapper">
  </div>
</body>
</html>
Indictment answered 23/6, 2014 at 8:37 Comment(4)
for the first page is ok but there are 3 - 4 pages for print. Others not existing on printing. – Harmony
So on other page try to add this code again ... elaborate what you want – Indictment
Ok I tried someting and solved my problem. Changed the #wrapper position:absolute to position:fixed. Thanks for your help. – Harmony
And can you upvote my question. Why they giving downvote, I cant understand. – Harmony
H
15

The best way is putting a fixed div in a page. The important thing is that you should not put any content inside it. It works seamlessly with multi-pages:

<html>
<head>
  <style type="text/css">
    #pageborder {
      position:fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="pageborder">
  </div>
sdf<br/>
sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>
sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>
111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>
</body>
</html>
Hulbert answered 2/6, 2018 at 10:47 Comment(0)
I
6

Try this it will help you : It will make border on full screen.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Border around content</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #wrapper {
      position: absolute;
      overflow: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 5px solid red;
    }
  </style>
</head>
<body>
  <div id="wrapper">
  </div>
</body>
</html>
Indictment answered 23/6, 2014 at 8:37 Comment(4)
for the first page is ok but there are 3 - 4 pages for print. Others not existing on printing. – Harmony
So on other page try to add this code again ... elaborate what you want – Indictment
Ok I tried someting and solved my problem. Changed the #wrapper position:absolute to position:fixed. Thanks for your help. – Harmony
And can you upvote my question. Why they giving downvote, I cant understand. – Harmony
H
-2

By default, the border renders outside of the area of the element.

Try adding this to the print CSS:

body { box-sizing: border-box; border: 10px solid black; }

Hope this helps!

Edit: you can also try making the border bigger, and adding temporarily !important to the box-sizing and border CSS. That sometimes helps me find the source of the trouble.

Hoopoe answered 23/6, 2014 at 8:33 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.