I have a bordered div that breaks across the page. Using

box-decoration-break: slice;

I can make the div not have a bottom border on page 1, and not have a top border on page 2, which is what I want. But because my div has rounded corners, it looks funny with the rounding into no border. To see what I mean, run this:

echo '<style>div { border-radius: 6px; border: 3px solid lightgrey; box-decoration-break: slice; font-size: 1in; position: relative;}</style><div>Hello<br/><br/><br/><br/>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div>' > test.html; prince test.html

Is there a way to not have rounding on the bottom of page 1 or the top of page 2?

I've attached a screenshot, too.

1. Screen Shot 2016-04-13 at 1.57.35 PM.png‎ 89.1 kB ‎
   Rounded corners

I think we need to change the way border-radius works so that it does not apply in this situation.

A special case for radius would fix my immediate problem -- that would work.

A more general solution might be to somehow make a way to target things that break across pages in the component parts? I haven't found a CSS standard for such a thing, but I imagine this (yes, my naming is terrible):

div:breaks-to-next-page {
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid dashed;
}
div:breaks-from-prev-page {
  border-radius: 0 0 4px 4px;
  border-top: 1px solid dashed;
}

Or instead of a pseudo-selector, a normal class (applied by prince) could achieve the same effect.

Having such targeting would allow me to do what I'd really like (and is consistent with our styling) where we use a scissor snip to indicate continuation in code blocks.

But I'd take a special case for border-radius and leave it to you to decide how to fix it.

Thanks!

1. scissors.png‎ 33.1 kB ‎
   Custom styling for page breaks (scissors

FWIW, I started a thread here -- perhaps something will come of it: http://lists.w3.org/Archives/Public/www-style/2016Apr/thread.html#msg300

This issue has been fixed in the latest builds and now border-radius should not apply when the borders are cut off by box-decoration-break: slice.

Awesome, thank you!

Edit: I've tested the new version and it works as I expect.

Edited 6 May 2016 by matt

In addition to this ...
When using the slice property it would be great to be able to detect page breaks.
I think its a shame that handling of border-radius became a special case
Preferably by adding a class to the element that is being split.
That would enable styling - ie adding padding to the last element - and the first element on the next page.
Thank you

1. Screen Shot 2017-09-28 at 10.23.09.png‎ 127.9 kB

CSS does the cascading before layout, so styling things in this way can't be done with CSS alone. With some JavaScript, however, it may be possible to achieve what you want in Prince using two passes.

Edited 28 Sep 2017 by markbrown

Thank you @markbrown,
So there is a way to detect "forced" page breaks using javascript?
It should only apply to page breaks that implies slice.

I'm not sure exactly what you mean. The changebars sample checks for page breaks by looking at the page numbers of the first and last boxes for an element. Perhaps you could try that technique?

Thx... just had a look at the example and that is exactly what i am looking for.