3

Actually I have border in html page. while printing, the content is coming in two pages and bottom-border for first page and top-border for second page does not occur.so how can I give page border for each page while printing.I have used @media print and wrote css inside that. Is there any other solution such that I should get boder on all sides for each page when printing the page ?

chinni krishna Reddy
  • 105
  • 1
  • 5
  • 1
    Try : http://stackoverflow.com/questions/1360869/html-print-header-footer?lq=1 – Jatin Aug 27 '14 at 04:08
  • Thanks for Reply what you have sent is related to adding custom header and footer for each page I want borders for each page while printing. – chinni krishna Reddy Aug 27 '14 at 04:28
  • @chinnikrishnaReddy I've made a simple layout. let me know if it works in your case. http://jsbin.com/nilepakibuno/1 – Kheema Pandey Aug 27 '14 at 04:41
  • You can add 2 elements. 1 for top border and 1 for bottom border with position fixed. As top provided link said that fixed elements printed in every page. your problem will be solved. Hide that elements from screen media. Or try before and after pesudo elements in css used for print media. i.e. body:before{} and body:after{} – Shyam Aug 27 '14 at 04:46
  • cool let me add it as answer and then you may accept it so people having same problem can get benefited. – Kheema Pandey Aug 27 '14 at 05:05

1 Answers1

-2

I've made a sample page here which will generate a border for every page. while printing the page. see DEMO.

HTML Code

<section id='page1'>
     <div class='box'></div>
</section>
<section id='page2'>
     <div class='box'></div>
</section>
<section id='page3'>
     <div class='box'></div>
</section>
<section id='page4'>
     <div class='box'></div>
</section>

CSS Code

@media screen, print
{
 .box{
  border:1pt solid black;
  border-radius:15px;
  position:absolute;
  top:0;
  width:28.2cm;
  height:19.3cm;
  }
section{position:relative;}
}
Kheema Pandey
  • 9,977
  • 4
  • 25
  • 26