Border

In any type of template, boxes, tables and table cells, paragraphs and other elements can have a border.

Elements have a rectangular shape, so their border has four sides. Each side of the border can have a different layout.

Adding a border

  1. Right-click the element and click the respective element on the shortcut menu.
    Alternatively, select the element (see Selecting an element) and on the Format menu click the respective element.
  2. Click the Border tab.
  3. Uncheck the option Same for all sides to be able to style each side of the border separately.
  4. Specify the width of the border (side). This is equivalent to the border-width property in CSS.
  5. Specify the style of the border (side), such as solid, dashed or dotted. This is equivalent to the border-style property in CSS.
  6. Specify the color of the border (side): click the downward pointing arrow next to Color to select a color from the list of predefined colors (see Defining colors, spot colors and tints), or click the colored rectangle to open the Color Picker dialog. In this dialog you can select a color from the color wheel, set RGB or CMYK color values or enter a hexadecimal color code. This setting is equivalent to the border-color property in CSS.

It is also possible to set an element's border in a style sheet; see Styling templates with CSS files.

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) 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 http://www.w3schools.com/css/css3_borders.asp.

This is, for example, how you could round the corners of a paragraph:

  1. Select the paragraph (see Selecting an element) and then select Format > Paragraph on the menu, or right-click the paragraph and select Paragraph on the shortcut menu.
  2. Click the Advanced button at the bottom of the Formatting dialog.
  3. Under Property, type border-radius.
  4. Under Value, type the value of the corner radius in a measure (10mm, 5px, 0.5in) or percentage (0 - 90%).
  5. Click OK, and click OK again to close the Formatting dialog.
Using a CSS file

Of course you could also add this rule to a CSS file; see Styling templates with CSS files. The following rule sets the border-radius of the corners of all paragraphs to 5 pixels: p { border-radius: 5px; }.
To make this rule apply to one specific paragraph, first give the paragraph an ID (select the paragraph and type the ID, for example rounded, on the Attributes pane). Then add the ID to the selector of the CSS rule, for example p#rounded { border-radius: 5px; }.
To make the CSS rule apply to a set of paragraphs with the same class, first give the paragraphs the same class (for example rounded). Then add that class to the selector of the CSS rule, for example p.rounded { border-radius: 5px; }.

  
  • Last Topic Update: 24/01/2017 09:32
  • Last Published: 7/6/2017 : 9:49 AM