2022.1

Rounding corners
Any element in a template can have rounded corners. For boxes and images, this option is
available in the Formatting dialog. For other elements, you have to create a CSS rule to set the
border-radius of the element (or class of elements).
Boxes, images and tables
To round the corners of a box, image or table:
1. Select a Box, Image or Table element (see "Selecting an element" on page669) and on
the Format menu click the respective element. Alternatively, right-click the element and
click the respective element on the shortcut menu.
2. On the first tab in the Formatting dialog (the Box, Image or Table tab respectively) specify
the corner radius in a measure (10mm, 5px, 0.5in) or percentage (0 - 90%).
3. For a Box or Image, click Apply to see the effect without closing the dialog or OK to close
the dialog.
For a Table, you have to take yet another step. Tables can't have rounded corners and
collapsed borders at the same time. All built-in table styles in the Designer have collapsed
borders. For the rounded corners to show, you must create a CSS rule that sets the table's
border-collapse property to separate instead of collapse.
1. Click the Advanced button at the bottom of the Formatting dialog.
2. Under Property, type border-collapse.
3. Under Value, type separate.
4. Add a padding to keep the table cells from sticking out of the rounded corners: under
Property type padding and under Value type a measure for the padding.
5. Click OK, and click OK again to close the Formatting dialog.
If the table's rounded corners are still not (fully) visible, check the styles for table cells. Table
cells can have their own background color and by that, hide the table's background color -
including the rounded corners. Table cells can have rounded corners as well, just as any other
elements; see below.
Other elements
To round the corners of elements other than boxes and images, or to have different roundings
on different corners, you have to make use of the CSS property: border-radius; see
Page 818