Use javascript to add round corners to a normal text element. The following are the steps to do this. (It is better to use CSS3 to do this unless you need to support browsers that do not support CSS3).
1. Create a style using the CSS Editor. Select either background color or background image. For example, we define two separate rules to demonstrate them:
a) round-corners - define a background image
b) round-corners-2 - define a background color
2. Apply the above two rules to two text elements as shown bellow.
3. Open this dialog. Add the above two styles using the Add button. For each style, set the radius to 20 or another value you want it to be and also set the background color to match the page background. Here we use white color. Click OK to accept the settings.
4. Preview them in the internal or external browsers. The results are shown below:
To apply this effect to other text elements, just add the styles round-corners or round-corners-2 to these elements. The round corners effect only applies to the text elements of this page. If these elements are copied to another pages, the styles will remain but no rounded corners effect. You have to set the javascript effect on the page that needs it. If this effect is to be used on every pages, add the javascript effect to the template page so that every pages that use this template page can use this javascript effect.
Please note that generating round corners using javascript may slow down the rendering of your page if there are many of them. If javascript is disabled on the browser, this effect will not be shown. Normally, only apply one javascript effect to an element as they are not designed to work together with other javascript effects.
Corners Style
Select which corners to apply the effects. Set the radius and select which corner effects to be used.
Select the background color. Normally the background will be detected automatically. Set this only when the background color is not detected correctly.
