Content Formatting Macros for Confluence Cloud

Round Rectangle

You can use this macro to contain content within a box with rounded corners. Content can include paragraph text, and plain text and bodiless macros such as our LaTeX or Button Hyperlink macros. These either have no additional text content area or allow only plain text without formatting such as color, special fonts, or attributes such as italics. The rectangle size, corners, and colors are configurable.

If you are migrating content containing the Round Rectangle macro from Server to Cloud, the original width of the rectangle is not preserved.

Instructions

  1. Navigate to the page you want to edit.

  2. Click the Edit icon.

  3. Click Insert > View More.

  4. Select the Round Rectangle macro in the Select Macro screen.

  5. Enter the content that you want to display within the rectangle.

  6. Customize the rectangle using the following parameters:

    Parameter Description Default Required

    Title

    Displays content in the space above the main content area between the upper corners

    none

    error

    Footer

    Displays content in the space below the main content area between the lower corners

    none

    error

    Background Color

    The background color of the content area; specify the hexidecimal code, e.g. #60dbdb or a common generic color such 'blue', 'green', etc.

    #C0FFC0 (Granny Apple green)

    error

    Width

    The width of the entire round rectangle; you can use pixel size (eg 500px), percentage (70%) or leave it blank to dynamically fit contents

    fits to contents

    error

    Height

    The height of the entire round rectangle; you can use pixel size (eg 200px), percentage (50%) or leave it blank to dynamically fit contents

    fits to contents

    error

    Corner size

    The radius, in pixels, of the round rectangle corners. This sets the defaults for the Horizontal Size and Vertical Size parameters below

    25px

    error

    Horizontal size

    This parameter, which defaults to the value defined by Corner Size, defines the width of the panel corner

    25px

    error

    Vertical size

    This parameter, which defaults to the value defined by Corner Size, defines the height of the panel corners

    25px

    error

    Footer Background Color

    The background color of the footer area (defaults to the same color as Background Color); specify the hexidecimal code, e.g. #60dbdb or a common generic color such 'blue', 'green', etc.

    background color

    error

    Title Background Color

    The background color of the title area (defaults to the same color Background Color); specify the hexidecimal code, e.g. #60dbdb or a common generic color such 'blue', 'green', etc.

    background color

    error

    Corners

    A comma-separated list of flags stating which corners should be rounded: Top Left, Top Right, Bottom Left, and Bottom Right

    true,true,true,true

    error

    Rows

    A comma-separated list of flags stating which rows should be displayed: Top, Middle, Bottom

    true,true,true

    error

  7. Click Preview to see how the rectangle will appear on the page, and make any desired changes.

  8. Click Insert. A macro placeholder is displayed on the page.

  9. Click Publish to see the round rectangle rendered on the page.

Examples

Setting the Background Color

You can assign any hexadecimal color values or common color name such as 'green', 'yellow', 'blue', etc. The background color defined sets the default background color for Title Background and Footer Background.

Default Height and Width; Background Color set to hexadecimal value #60dbdb.

cloud-round-rec1

Adding Titles

Text may be added to the title area (above the main content area, between the two rounded corners). You can define a different background color for the title area.

Title set to 'Chapter 1' and Title Background Color set to #edf5f5.

cloud-round-rec2

Adding Footers

Text may be added to the footer area (below the main content area, between the two rounded corners). You can define a different background color for the footer area. Note how the rectangle default size expands to fit contents.

Footer set to 'Summer 2021' and Footer Background Color set to #edf5f5.

cloud-round-rec3

Setting Width

The width of the round rectangle may be defined in pixels or a percentage.

Background Color set to #edf5f5 and Width set to 400px.

cloud-round-rec4

Setting Height

The height of the round rectangle may be defined in pixels or a percentage.

Background Color set to #edf5f5 and Height set to 170px.

cloud-round-rec5

If content is too large to fit, the round rectangle will expand to fit.

Setting Corner Size

The radius of the curved corners is defined using the Corner size property.

With Background Color parameter set to hexadecimal value #edf5f53, Corner Size set to 10px.

cloud-round-rec6

Background Color set to #edf5f5 and Corner Size set to 50px.

cloud-round-rec7