The Web Just This Site

NM Web Tutorials

CSS Properties and Values for Borders

Here is a list of properties and values that you can simply add to your Style Rules, experiment, combine, go nuts!

Border Types

Here is a typical example of a border.

border: #000000 solid 1px;

The first value is of course the HEX Colour code. The next value you can have different types of borders:

solid: just a regular line.
dotted: a dotted line.
double: makes two lines, must be a certain thickness, and Internet Explorer may give you problems if you set up your border to only be on a certain side, it’s worth a shot though.
hidden: works similarly to a margin that pushes other content away, with an invisible border.

The last value is the thickness of the border, your options are as follows:

medium;
thin;
thick;
number followed by unit of measurement;

What if you want a different border type on a certain side?

That is a possibility, if you want a certain side (or sides) to have a certain thickness, colour, style, it’s very easy to do:

border-top: ADD_VALUES_HERE;
border-right: ADD_VALUES_HERE;
border-bottom: ADD_VALUES_HERE;
border-left: ADD_VALUES_HERE;

Need I say more? Add, experiment, go nuts!