You might remember that it is possible to change the background of the tables on your homesite (the ones that say "Social", "Academic" etc). With CSS you can change the borders around those tables too. Here's how.

The short answer

Here's the code:

.gram { border-color: #993300; border-width: 1px; border-style: dotted; }

Just edit the parts shown in white. (See below for more options.)

The medium-sized answer

There are three settings you can change on your borders:

• border-width
• border-color
• border-style

You can change all of these at the same time, using the border attribute. Here's an example:

<div style="border: 3px coral solid;">textgoeshere</div>

Notice how the width, color and style come one after the other, with a space between each. The order doesn't matter.

Ok, here are all the values you can use for each one.

border-width

These can be denoted in pixels (for example, border-width: 3px), or you can use one of the three standard values: thin, medium and thick.

border-color

You can color your borders using HEX color codes (for example, border-color: #ffffff) or named colors (for example, border-color: gold).

border-style

These change the way your borders are presented. There are eight possible styles you can use:

border-style: solid;

border-style: dashed;

border-style: dotted;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: inset;

border-style: outset;

There's something else you can do with these tables, but that probably deserves its own separate post.