Borders and Rounded Corners

Here are several ways to change the appearance of images, such as adding a border or displaying an image with rounded corners. These changes must be made in the HTML view of the editor by adding code to the image’s <img> tag. The image below shows HTML code where style code has been added to the image code.

Below are examples of different image styles. The code that creates each style is shown below the corresponding image. You can copy the code, for example by triple-clicking it, and paste it into the HTML view of the editor.

Image with a light grey border

style="border: 7px solid lightgray;"

Space between the image and the border

style="border: 1px solid #959595; padding: 20px;"

Image with rounded corners

style="border-radius: 10px;"

Image made oval

style="border-radius: 50%;"

If the original image is square, the same code will make the image circular.