Creating Frames for images using CSS Classes

Image Border Class creation

img (this is the HTML tag for any image on your page)
img.border (Border is the class that will be attached to the image once selected from the style area in the CMS)
.border (is a class accociiated with any element not just images.)

Border Class Properties
boder-style

The border-style property specifies what kind of border to display.

  1. none {border-style: none;}
  2. dotted {border-style: dotted;}
  3. dashed {border-style: dashed;}
  4. solid {border-style: solid;}
  5. double {border-style: double;}
  6. groove {border-style: groove;}
  7. ridge {border-style: ridge;}
  8. inset {border-style: inset;}
  9. outset {border-style: outset;}
  10. hidden {border-style: hidden;}
border-color

The border-color property is used to set the color of the border. The color can be set by:

  • name - specify a color name, like "red"
  • Hex - specify a hex value, like "#ff0000"

You can also set the border color to "transparent". eg. border-color: #ff0000;
border-width

The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. eg border-width: 2px;
background-color Sets the background color within the box/borders eg. background-color: #ff000000;
padding

sets the amount of space between the image and the border

Padding is set in pixels ie padding: 4px;
margin Sets the distance outside the box/borders to the next object or text e.g. margin: 4px;

Examples and Codes

Here is a small collection of examples to illustrate Frames and borders that can be applied to images through out your site. By using the Class Properties from above.

Please feel free to copy the code and adjust to your liking past it into your style sheet. and then the styles will be available from the styles drop down bocx in your content editor.