Scrollbar thumbs are really tough to get right without distortion on rounded ends.
.
One piece of advice you might find helpful: a key thing to grasp is that thumb sizing is ultimately controlled by scrollbar background image. You can make the thumb image as big as you want, but it will always get squished down to fit within the limits of your scrollbar width, which when combined with margins and scaling, can mess up how it comes out in actual use.
I thought it would be useful to show a scrollbar that has an actual background to illustrate more explicitly how the background limits the thumb size (note: there are lots of tricks you can play with margins, transparency and other image control parameters to do some pretty unique stuff)
Thanks for the tips. I've concluded that getting low-distortion rounded scrollbar handle ends is pretty much a crap shoot discovery process. First, draw width of the background to set overall scrollbar width, as you suggest. Then draw the handle images for each state at widths close to what you want relative to the background width. Set margins and DrawMode to control sub-image stretching. Finally, iteratively tweak the Scale factors between 1 and 3 until distortion is brought down to an acceptable level. If the final appearance is not right, start all over again. Seems to work, but there really should be a better, more deterministic built-in method wrt to handling distortion once margins and DrawMode are properly set.
On the other hand, if you're satisfied with flat ends, it's more straightforward.