The Adaptavist Group LogoDocumentation

Round Rectangle

The Round Rectangle macro allows you to quickly and easily create rounded rectangles to contain content within a box with rounded corners. The rectangle size, corners, and colors are configurable. You can further customize the round rectangle with our CSS Style Sheet Macro.

Add a Round Rectangle to your page

  1. Navigate to the page you want to edit.
  2. Click Edit.
  3. Click the location where you want to add the rectangle. This can be repositioned later if required.
  4. Click Insert More Content → Other Macros .
  5. Select the Round Rectangle macro from the Macro Browser.
  6. Complete the desired fields.
    ParameterDescriptionDefaultRequired
    TitleDisplays content in the space above the main content area between the upper cornersnone
    FooterDisplays content in the space below the main content area between the lower cornersnone
    Background ColorThe background color of the content area. This can be either a common color name (supported by most browsers) or a hexadecimal color code (supported by all browsers).#C0FFC0
    Title BackgroundColorThe background color of the title area (defaults to the same color as the overall background color). This can be either a common color name (supported by most browsers) or a hexadecimal color code (supported by all browsers).background-color
    Footer Background ColorThe background color of the title area (defaults to the same color as the overall background color). This can be either a common color name (supported by most browsers) or a hexadecimal color code (supported by all browsers).background-color
    WidthThe width of the entire round rectangle specified in pixels (347px default), percentage (eg. 70%) or leave undefined to stretch to fit the contents.347px2
    HeightThe minimum height of the entire round rectangle specified in pixels (347px default), percentage (eg. 70%) or leave undefined to stretch to fit the contents.347px
    Corner SizeThe radius, in pixels, of the round rectangle corners. This sets the defaults for the Horizontal Size and Vertical Size parameters below25px
    Horizontal SizeThis parameter, which defaults to the value defined by Corner Size, defines the width of the panel cornerCorner Size
    Vertical SizeThis parameter, which defaults to the value defined by Corner Size, defines the width of the panel cornerCorner Size
    Corners Lists which corners should be rounded in the order: Top Left, Top Right, Bottom Left, and Bottom Right.To have a none rounded corner change the corresponding true to false. true,true,true,true
    RowsLists which rows should be displayed in the order: Top, Middle, Bottomtrue,true,true
    CSS Class Use in combination with Global Confluence CSS or a CSS Stylesheet macro that you have added to your page. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. none
  7. Click Insert. The macro placeholder displays.
  8. Add your desired content to the macro body then save the page to display the rendered rectangle.

Basic use with default settings

The following example shows a default round rectangle macro.

Defining the Background Color

The background color may be set to any color using color name or hexadecimal color values in the Background Color parameter, e.g.

Published Result

Adding titles and Footers

Text may be added to the title area and footer area using the Title and Footer fields.

Published Result

Setting Width

The width of the round rectangle may be defined using pixels or a percentage in the Width field

Setting height

The minimum height of the round rectangle may be defined using pixels or a percentage in the Height field

Setting Corner Size

The radius of the curved corners is defined using the Corner Size field. The higher the number of pixels, the more rounded the corner will be.

If you want to define a different color for the title and footer areas, you can use the Title Background Color and Footer Background Color fields.

Tip: The title and footer background color will only change if there is content in the Title and Footer fields, respectively.

Not All Corners Rounded

You can select which of the corners you would like to be rounded by using the Corners field.

Search documentation

Start typing to search the docs.