I would like my document to start on page number 3. I am trying the following CSS:

@page:first{
  counter-reset: page 3;
}
@page {
  counter-increment: page;
}
@page:right{
  @top-right-corner{
    content: counter(page);
  }
}
@page:left{
  @top-left-corner{
    content: counter(page);
  }
}

This does not work. However, if I apply counter-reset to the body, and counter-increment to an arbitrary html element (like paragraphs), it does work as expected (though not as desired, obviously). I've also tried with a custom counter like mypage, with the same failure.

What am I missing?

You will need to reset the page counter on the body or root element, but you should not need to manually increment it, that should happen automatically.

Yes! That worked, thank you.

If I wanted to use a custom counter (not page) there would not be a way to increment it under @page, it would need to be incremented on an html element, is that right?

Edited 3 Oct 2019 by norabrowndesign

Yes that is correct, other counters cannot be incremented on @page rules at this time.

After the page break is inserted, the custom header and footer style cannot be set. What should I do?

Please post an example of your HTML and CSS in a new forum thread.