LINKS

Change the size by pixels
border: 1px solid black;
border: 4px solid black;

Web Studio Next

Web Studio Next CSS Image Borders

This is how I add borders to my pictures. My favorite is a simple black border, I personally think it makes them look a little better on the page.



If you are not familiar with web studio refer to the instruction page

Adding borders to images using CSS

Where you put the code in Web Studio

The original

1. Put your picture on the page, then select it
2. Select the HTML TAB
3. In "Insert Object HTML" use INSIDE OBJECT
4. Paste in the code from below and PREVIEW

Outset Border

Solid Border



Inset Border



Double Border



Padding with Border



and it's pixel size
padding:3px;
padding:6px;

Polaroid Padding



Polaroid uses different sizes padding, top right bottom left
padding: 3px 3px 12px 3px;

Polaroid with Border



Changing the Border Color & the Border Size

You can change the color by name
border: 1px solid Black;
border: 1px solid Navy;

or change the color by hex code
border: 1px solid #000000;
border: 1px solid #000080;

or with hex code
background-color: #ffffff;
background-color: #ffd700;

padding: adds a space around the image, using it you can add another level to your borders. 

Change the Image Padding Color & Padding Size

Change the color by name 
background-color: white;
background-color: gold;

Border styleBorder Size
Border Color
Background color

Next Image Border & Colored Division Generator

This will make the image border code for you

Select your border style, size and color then click the button. I made a small program that will make the border code for you.

See the CSS backgrounds II page for more
on colored divisions

aaaaaaaaaaaaiii