Angenommen wir haben eine DIV-Klasse und wollen diese mit Rand verschönern. Die einfachste Methode ist diese hier:

.kasten {
border: 1px solid #000000;
}

Das sieht dann so aus:
1px steht für die Anzahl der Pixel das könnten auch 5px sein, dann wäre es ein ganz dicker Rand! #000000 ist die Farbe in Hex-Code. Solid ist das wichtigste das ist die Art von der Linie. Solid ist in diesem Fall die ganz normale Linie.

Jetzt möchte man vielleicht aber gar keinen Kasten sondern nur unten eine Linie:

.kasten {
border-bottom: 1px solid #000000;
}

Ergebnis:
man hängt einfach bottom und einen Bindestrich dran. Für links schreibt man left, für rechts right und für oben top. Man kann also auch mehrere Borders benutzen so:

.kasten {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

Ergebnis:

Jetzt möchte ich nochmal auf die Arten eingehen. Also außer solid!

dotted oder dashed (1px)

(Tipp: bei mehr Pixeln sieht es wie Punkt aus)

double (3px)


ridge (10px, #996666)


inset (10px, #996666)


outset (10px, #996666)


Ich hoffe, das konnte euch ein bisschen was beibringen =)