Unless you are going to support older browsers like Internet Explorer 8 (IE8), you should use CSS3 to create rounded rectangles. The tutorial on this page "Create rounded corners text/image element using CSS" will show you how to do this.
We are going to create a rounded corners flexible box which allows us to change it's size without creating new image for each. This method only works on background with sold colors. This cannot be applied to background with gradient colors.
Select Tools -> Image Editor from the main menu to open the Image Editor.
Click on the down arrow of this button . Select New Image -> Blank. Create a new image of size 60x60. Set the color of this image to the background color of your page. Click OK to create the image.
Click this button to open the Add Shape Dialog. Select the "Shape tab". Set the curve to 20.
Select the "Style tab". Set the color to #0078F0.
Click OK to create the shape.
Click the button "Create Flexible Box". The default settings of the dialog is okay. Just press OK to continue.
Select GIF for image type.
Click OK to create the flexible box. The box is now look like this when resized.
Right click on this element and select "Styles" from the context menu.
Select "outer" from the container and select the style "box2-top-left". Click the Edit button to open the CSS Style Editor.
Select the "Background tab" and set the color to #0078F0.
Click OK to save the settings. The flexible box will look like this when resized.
. Select New Image -> Blank. Create a new image of size 60x60. Set the color of this image to the background color of your page. Click OK to create the image.
to open the Add Shape Dialog. Select the "Shape tab". Set the curve to 20.
