Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make page border in print CSS for every single page

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.

like image 608
Yasin Yörük Avatar asked Jun 23 '14 08:06

Yasin Yörük


People also ask

How do I put a border around the whole page in CSS?

If you want a border around the entire page, put that border property within body{} in your CSS.

Can we apply CSS to page for printing?

You can use CSS to change the appearance of your web page when it's printed on a paper. You can specify one font for the screen version and another for the print version. You have seen @media rule in previous chapters.

How do I set print margins in CSS?

You can use the margin, margin-top, margin-bottom, margin-left, and margin-right properties within the @page rule to set margins for your page. Finally, the marks property is used within the @page rule to create crop and registration marks outside the page box on the target sheet. By default, no marks are printed.

How do you put a border on a print?

Go to Layout > Margins, and select Custom Margins. Increase the border that corresponds with the one that's missing when you print.


2 Answers

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>
like image 142
Mahmoud Moravej Avatar answered Nov 16 '22 04:11

Mahmoud Moravej


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>
like image 26
Shashank Avatar answered Nov 16 '22 03:11

Shashank