Create rounded corners text/image element using CSS
This tutorial will show how to create the following rounded rectangle using CSS.
Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Create a new style by clicking on the "Add" button on the right. Then rename it to "rounded-rectangle" by clicking on the "Rename" button or pressing the "F2" key.
Select the "Background" tab on the left and set the backgound color as follows:
Select the "Borders" tab and set the "Radius" as follows. You can use another value for the radius of the rounded corners.
Click on the OK button to save this new style.
This new style will now appear on the "Available CSS Styles" panel in the "CSS Styles" tab as shown below.
Open a page and insert a text element on the page by selecting "Insert" > "Text" from the main menu or clicking on this button on the toolbar.
To apply this style to the text element on the page. Drag the style "rounded-rectangle" from the "Available CSS Styles" and drop it to the element on the page. If that element is selected, you can just drag the style "rounded-rectangle" and drop it to the "Page / Element CSS Styles" panel above. Both will result in the following:
To apply this style on an image, do the same as above but drop it to an image. If this style will only be applied to images, you can skip the setting of the background color.
on the toolbar.
on the toolbar.
