Google Sites Help‎ > ‎Images‎ > ‎

Image borders

posted Apr 26, 2012, 4:49 PM by Julie Sharma   [ updated Aug 8, 2015, 12:08 PM ]

You can add a border to your images using HTML markup.

For hints about html basics, try HTML basics.

Add a basic border

  1. be sure you are signed in to Google Sites, and then go to your site
  2. click on the penciledit screen pencil to edit the page (top, near-center)
  3. add the image (see these tutorials to add an image from your computer or Picasa)
  4. while still in edit mode, click on the image (to put the cursor in the right section of the computer)
  5. click on <HTML> (top, to the right of the text alignment buttons) menu

  6. look through the html for your image (hint: search for <img to find images in the html). You should find something like this

    <img alt="sample picture" src="">

     note: your html will be probably have different terms in it

  7. add border style attribute (border ="1"), to get something like

    <img alt="sample picture" src=""
    style ="border:1;">

Formatting with attribute options

You can change the weight, style, color, which borders to alter, and padding (spacing between border and image) using style attributes:

image with solid border
style ="border:1px solid black; padding:5px;"

1 pixel weight, solid black border with 5 pixels of padding

image with dotted border
style ="border:3px dotted red;"

3 pixel weight, dotted red border without padding

image with border
style ="border:5px dashed blue; padding:20px"

5 pixel weight, dashed blue border 
with 20 pixels of padding

image with solid border
style ="border-top:1px solid black;
border-bottom:1px solid black;"

1 pixel weight, solid black border on top and bottom only

Sample complete html for an image with a 1 pixel solid black border with padding:

<img alt="sample picture" src="" 
style = "border:1px solid black; padding:5px;">

View Related Posts

Facebook Twitter Google+ Addthis