Page 1 of 1

CSS-based PDF: Make borders go all the way across page

Posted: Wed Aug 15, 2018 12:50 am
by mdslup
Here is what my @page looks like:

@page {
size: us-letter landscape;
column-count: 2;
column-gap: 0.5in;
margin-left: 0.1in;
margin-right: 0.1in;
margin-top: 0.1in;
margin-bottom: 0.5in;

}

I'd like to have a border go all the way across the bottom of the page and override the margins. When I add something like this to my @page:

border-left: 0.5in solid yellow

that border is still constrained by the left and right margins. Is there a way to make it extend all the way, regardless of the margins?

Re: CSS-based PDF: Make borders go all the way across page

Posted: Wed Aug 15, 2018 12:06 pm
by Costin
Hi,

You should just add an additional "@bottom-left-corner" page-margin-box selector inside your "@page" rule.
For the "@bottom-left-corner" you should set the same margin and border on its left side.
More specific:

Code: Select all

@page {
size: us-letter landscape;
column-count: 2;
column-gap: 0.5in;
margin-left: 0.1in;
margin-right: 0.1in;
margin-top: 0.1in;
margin-bottom: 0.5in;

border-left: 0.5in solid yellow;

@bottom-left-corner{
content:"";
margin-left: 0.1in;
border-left: 0.5in solid yellow;
}
}
In the same way as you did for the content pages ("@page" selector), you could also add it to your cover page:

Code: Select all

@page front-page {
@bottom-left-corner{
content:"";
margin-left: 0.1in;
border-left: 0.5in solid yellow;
}
}
Regards,
Costin