Creating page borders in print CSS for each individual page is a helpful way to enhance the visual appeal

Question

Creating page borders in print CSS for each individual page is a helpful way to enhance the visual appeal

I am facing an issue where I have a lengthy HTML document that is ready for printing, but I need to add borders to every page. I tried adding

body { border:2px #666 solid; padding:5px; }

in the CSS code, which looked good in the HTML view, but not in the print view. The problem is that the border-bottom is not showing on the first page, and the border-top is not showing on all the other pages.

I have been researching for a solution to this problem, but have not found one yet. It seems like it should be a simple trick to achieve, but I am still struggling to find the right solution.

html css print-css

Answer 1

Answer №1

To create a fixed div on a webpage, simply add the following CSS code to your page. It is important not to include any content inside the div for optimal performance across multiple 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/>
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
</body>
</html>

Answer 2

To create a fixed div on a webpage, simply add the following CSS code to your page. It is important not to include any content inside the div for optimal performance across multiple 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/>
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
</body>
</html>

Answer 3

Answer №2

Give this a try for creating a border that covers the entire screen.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Creating Full-Screen Border</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>

Answer 4

Give this a try for creating a border that covers the entire screen.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Creating Full-Screen Border</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>

Answer 5

Answer №3

Typically, the border is displayed outside of the element's content area.

To adjust this behavior when printing, consider including the following CSS:

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

I hope this solution proves helpful!

Update: Experiment with increasing the border size and adding !important temporarily to the box-sizing and border properties in your CSS. This may assist you in identifying any issues more easily.

Answer 6

Typically, the border is displayed outside of the element's content area.

To adjust this behavior when printing, consider including the following CSS:

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

I hope this solution proves helpful!

Update: Experiment with increasing the border size and adding !important temporarily to the box-sizing and border properties in your CSS. This may assist you in identifying any issues more easily.

Creating page borders in print CSS for each individual page is a helpful way to enhance the visual appeal

Answer №1

Answer №2

Answer №3

Similar questions

Names picked at random and presented in the innerHTML

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

Placement of BOX alongside each other

Navigation bar failing to show all content on Safari web browser

Difficulty with the Jquery <span> tag on Mozilla 3.6.1

What is the best way to make HTML adjust to SVG scaling?

Guide on how to position a single anchor at the center of a div alongside other elements

What is the most effective method to implement a toggle function using only JavaScript, without any reliance on jQuery?

Adding the header.php file in WordPress caused the style.css to stop working

Making poll everywhere items align horizontally using HTML: a step-by-step guide

Trouble with the div element's change event

The position of a jQuery element gets reset when both the show and stop animations are used

It's proving difficult for me to align my header and navbar on the same line

Creating a custom dynamic favicon and title in NextJS

Make the button appearance change when being clicked different from when being hovered over

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

Circular arrangement using D3 Circle Pack Layout in a horizontal orientation

interaction with leaflet popup information

Transferring information from an HTML form to a C# webservice through AJAX

Modifying the Header Background Color