Borders button will allow you to alter more effects than the Margin or Padding property settings.  You can adjust the border width, choose from several border styles, and pick a border color.

 

What is a BORDER ?

 

A Border is a way of highlighting text or images.  It is placed between the element's Padding and the element's Margin.  You can take advantage of more features with BORDERS than with the properties for PADDING or MARGINS.  The following steps will show you how to alter the border width, border style, and border color.  

Setting the Border Values

 

1) You first must determine the size of the Border.  You have three choices.  

 

Fixed:  This is a general way of sizing the border.  It uses the values: none, thin, medium, or thick.  Medium is the default size.

 

Length:  Use pixels to determine the size of your border.

 

Percentage:  This option uses the overall size of the browser to determine its size.

 

2)  Next you can choose the Border Style.  You have nine different choices.

 

None - The border is not displayed

 

Dotted - The border is a dotted line, like a cut-out coupon.

 

Dashed - The border is dashed, similar to dotted but with bigger sections of line.

 

Solid - The border is continuously solid.

 

Double - The border contains two lines.  Not to be confused as two different borders.

 

Groove - The border is a 3D groove.  Looks as if it is grooved into the webpage.

 

Ridge - The border is exactly like Groove except that the border is sticking out instead of pushed in.

 

Outset - The border is actually a solid rectangle (the dimensions of the element), and it is sticking out of the webpage.

 

Inset - The same as Outset except that the solid rectangle is pushed into the webpage.

 

3)        Finally, you can assign the Border Color. 

 

Choose among all your favorites, including Teal, Aqua, Fuchsia, and the rest of the rainbow.

Other Properties:

  Font Designer 

  Color and Background 

  Alignment 

  Margins 

  Padding