Least Tern > Tech Class > Teacher Resources > Web Design Resources

CSS Borders

 

Border Values / Styles | Adding a Border to a Page Element | Padding

Border Values or Styles

This border is really too elegant for the picture, but it gives you an idea of the types of border available.

The property border-style determines what the line looks like. The choices are:

Code for image border - note that it is not necessary to set the height and width as they are determined by the image size. The code is placed in the <head> section inside of a <style> tag:

.dottedborder {
border-top: 2px dotted black;
border-bottom: 4px dashed green;
border-right: 1px black solid;
border-left: 5px double green;}

The code for the image calls the class dottedborder:

<img src="images/tern.gif" width="350" height="260" class="dottedborder" align="right">

top

Adding a Border to a Page Element

To add a border, you need to enter values for style, width (top-width, bottom-width, right-width, left-width), color, and the width of the element itself

This paragraph's border is created with the following code:
<style type="text/css">
.mixedborder {
width: 300px;
border-top: 10px red inset;
border-bottom: 10px blue groove;
border-left: 10px silver ridge;
border-right: 10px green outset; }
</style>

In the <body> of the page, add the following code into the <p> tag: <p class="mixedborder">

.

top

Padding

Padding is the space between the "edge" of an element and its contents. This CSS will not work with IE 6.0 on a PC.

Here is a red dot (left) with a double border of 5px, padding 20px, and the same dot (right) with a dashed border of 3 px, padding 40px. The center green dot has an inset border of 5 px, padding 2px on the bottom and right and 25 px on the top and left. Notice how this moves the dot around within the border frame. All dots have been given an hspace=20px to create the whitespace.

The code in the <head> section is this:

.leftdot {
border: 5px double red;
padding: 20px;}
.centerdot {
border: 5px inset blue;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 25px;
padding-left: 25px;}
.rightdot {
border: 3px dashed green;
padding: 40px;}

The following code is added, for example, to the <img> tag of the left dot:

<img src="images/reddot.gif" width="32" height="32" hspace="20" class="leftdot" valign="bottom" halign="right">

top

Elizabeth Sky-McIlvain 3/7/04