Examples using Rounded Corners
The "border-radius" property in the http://xmlgraphics.apache.org/fop/extensions namespace is a shorthand property for setting appropriate values for "border-*-radius" (see below), and is used to specify round corners on block areas. The property takes one or two values:
Circular corners are specified when 'border-radius' is set to a single value. This value is the radius of the outer quadrant of the corner.
Quarter-ellipse corners can be generated by setting two values for the property. The first value is the radius in the Inline Progression Direction. The second value is the radius in the Block Progression Direction.
The radii for a specific corner can be specified for each CORNER (in 'before-start', 'before-end', 'after-start', 'after-end') with the property "border-CORNER-radius". These properties
have the same interpretation as the "border-radius" property.
Backgrounds are cropped…
…even with zero width borders.
There are two canonical cases for rounded corners distinguished by the following condition: The width of each border segment is less than the corner radius perpendicular to that segment. This is demonstrated in Case I when this condition is true and Case II when false.
I
II
The border segments join at a line that coincides with the one that intersects the inner and outer corners of the equivalent rectangular corner. This is clearly demonstrated below where rounded borders are overlayed on top of rectangular borders.
If border radii are specified that would produce overlapping curves (as is the case for the block containg this text), then all border radii are proportionally reduced until none of them overlap. This is in accordance to the procedure described at http://www.w3.org/TR/css3-background/#corner-overlap.