The {roundrect} macro allows you to quickly and easily create rounded rectangles

There are times when you want to put a box around some content but want that box to have rounded corners, this macro allows you to do that.

This macro is used as shown below:

{roundrect:title=myTitle}body content{roundrect}

Parameters

Parameter	Default	Required	Notes
bgcolor	#C0FFC0		The background colour of the rounded rectangle, this should be specified as a hex value
title			The contents of the title cell, if required
footer			The contents of the footer cell, if required
width	fit contents		By default, the panel width will stretch to fit it's contents, unless you specify a specific width
height	fit contents		By default, the panel height will stretch to fit it's contents, unless you specify a specific height
cornersize	25px		The radius, in pixels, of the panel corners. This sets the defaults for the hSize and vSize parameters below.
hSize	cornersize		This parameter, which defaults to the value defined by cornersize, defines the width of the panel corners.
vSize	cornersize		This parameter, which defaults to the value defined by cornersize, defines the height of the panel corners.
antialias	false		Setting the antialias parameter will result in much smoother corners and enable the cornercolor parameter
footerbgcolor	bgcolor		The background colour of the footer area (defaults to the same colour as the overall background colour bgcolor), this should be specified as a hex value
titlebgcolor	bgcolor		The background colour of the title area (defaults to the same colour as the overall background colour bgcolor), this should be specified as a hex value
corners	true,true,true,true		a comma separated list of flags stating which corners should be rounded: Top Left, Top Right, Bottom Left, Bottom Right
rows	true,true,true		a comma separated list of flags stating which rows should be displayed: Top, Middle, Bottom
rows			a list of classes to be applied to the roundrect table

This plug-in is available without cost for both commercial and non-commercial purposes. However, if you have found it to be useful, particularly within a commercial environment, please consider making a donation to the author. This will encourage continued development of this and other plug-ins, as well as speeding up the response for your latest maintenance request.

If you wish to donate, it can be done easily with a credit card or bank transfer using PayPal. No account sign-up is required for credit or debit card payments.

This software is released under a BSD License

© 2005 Adaptavist.com Limited

This macro has been tested by Adaptavist with Confluence 2.1.2

It is usually pre-installed with Builder accounts. To install it on your own Confluence installation, please see Content Formatting Macros

Adaptavist maintain a JIRA Project for tracking bug reports and feature requests for this macro. The currently reported items are shown below:

• panel macro
• info macro
• warning macro
• tip macro
• note macro
• bgcolor macro

Basic Use

The following example shows how to create a basic round rectangle...

{center}{roundrect}Some Content{roundrect}{center}

Which produces the following results:

Some Content

Setting the background color

You can set the background color to anything you like

{center}{roundrect:bgcolor=00a044}Some Content{roundrect}{center}

Here's the result:

Some Content

Adding Titles

You can add text or images to the title area (above the main content area, between the two rounded corners)

{roundrect:bgcolor=a3e3a3|title=Some Title}Some Content{roundrect}

Here's the result:

	Some Title
Some Content

Alternativley you can embed wiki markup into the title, allowing you to define a graphical title image

{roundrect:bgcolor=00a044|title=!title.png!}Some Content{roundrect}

Which results in:

Some Content

Adding Footers

You can add text or images to the footer area (below the main content area, between the two rounded corners)

{roundrect:bgcolor=a3e3a3|footer=Some Footer}Some Content{roundrect}

Here's the result:

Some Content
	Some Footer

As with the title you can also embed wiki markup, allowing you to define a graphical footer image

{roundrect:bgcolor=00a044|footer=!footer.png!}Some Content{roundrect}

Which results in:

Some Content

Setting Width

You can define the width of the round rectangle.

{roundrect:bgcolor=a3e3a3|width=333}Some Content{roundrect}

Here's the result:

Some Content

Setting Height

You can define the minimum height of the round rectangle.

{roundrect:bgcolor=00a044|height=333}Some Content{roundrect}

Here's the result:

Some Content

NB: if content is too large to fit, the roundrectangle will expand to fit

{center}{roundrect:bgcolor=a3e3a3|width=400|height=10}{loremipsum:1}{roundrect}{center}

Here's the result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris.

Setting cornersize

You may define the radius of the curved corners using the cornersize property

{section}
{column}{roundrect:bgcolor=a3e3a3|width=333|height=333|cornersize=10}Content{roundrect}{column}
{column}{roundrect:bgcolor=a3e3a3|width=333|height=333|cornersize=50}Content{roundrect}{column}
{section}

Results in:

Content

Content

Setting hSize

You may also override the cornersize setting using the hSize parameter which allows you to set the width of the corner images

{section}
{column}{roundrect:bgcolor=00a044|width=333|height=333|hSize=10}Content{roundrect}{column}
{column}{roundrect:bgcolor=00a044|width=333|height=333|hSize=50}Content{roundrect}{column}
{section}

Which Produces:

Content

Content

Setting vSize

There is also a companion parameter to hSize that allows you to set the vertical height, this is called vSize

{section}
{column}{roundrect:bgcolor=a3e3a3|width=333|height=333|vSize=10}Content{roundrect}{column}
{column}{roundrect:bgcolor=a3e3a3|width=333|height=333|vSize=50}Content{roundrect}{column}
{section}

Which Produces:

Content

Content

Setting antialias

Setting the antialias property to true uses a different kind of image to ensure that the edges of the corner have been antialiased (jagged edges removed).

{section}
{column}
{roundrect:bgcolor=00a044|title=Aliased|width=333|height=333}Content{roundrect}
{column}
{column}
{roundrect:bgcolor=00a044|title=Antialiased|antialias=true|width=333|height=333}Content{roundrect}
{column}
{section}

Which produces:

Aliased Content

Antialiased     Content

For the technically minded the aliased gif images are replaced by a single swf file that knows how to rotate and color itself.

Setting cornercolor

Setting the antialias property to true also enables the cornercolor property which allows you to create round rectangles on top of non-white backgrounds

{section}
{column}
{roundrect:bgcolor=00a044|cornercolor=#F9F9F7|bgColor=#003399|width=333|height=333|antialias=true}Content    {roundrect}
{column}
{column}
{roundrect:bgcolor=00a044|cornercolor=#F96688|bgColor=#003399|width=333|height=333|antialias=true}Content    {roundrect}
{column}

Which produces a round rectangle whose corners match the background of the tab and another rectangle whose corners do not match:

Setting the Title and Footer colours

You may wish to use different colours for the title and footer areas, this can be done using the titlebgcolor and footerbgcolor parameters

{center}{roundrect:titlebgcolor=#AAAAAA|footerbgcolor=#AAAAAA|cornercolor=#F9F9F7|antialias=true}Some Content{roundrect}{center}

Which produces the following results: