stroked and filled rectangles with rounded corners
A family of light blue fill and dark blue stroked rectangles with rounded corners and decreasing width is displayed.
The left rectangles are animated with decreasing width too.
For smaller rectangles the width gets smaller than 2 times the radius of the rounded
corners and the stroke-width, therefore the fill is not visible anymore for them.
Only the animated rectangles at the beginning and the two next rectangles
on their right have a visible fill.
The three lines differ only in the property stroke-linejoin indicated with the
title element and the appearance of the gray rectangle using no rounded corners,
where the property stroke-linejoin therefore has a visible effect. stroke-linejoin has
no influence at all on the appearance of the blue rectangles, because for rectangles
with rounded corners the 'miter angle' between two path fragments is always zero,
this means, a rectangle with rounded corners has no corners anymore.
To test the correct rendering, the gray rectangles with exactly the same height are
given for comparison. If the height of the blue rectangles is larger or smaller as
the height of the gray rectangle, an error is occured. If the blue rectangles differ from
line to line, this indicates an error too.
rectangles with stroke-linejoin round
rectangles with stroke-linejoin bevel
rectangles with stroke-linejoin miter
stroked rectangles with rounded corners
gray rectangles:
exact height for all rectangles