Status: Aktueller Standard
"border" steht für border (Rahmen, Begrenzung).
"border" ist ein Shorthand-Property, mit dem man gleichzeitig die Breite ("border-width"), den Stil ("border-style") und die Farbe ("border-color") aller vier Seiten eines Elements festlegt. Der Stil ("border-style") ist der einzige Wert, der zwingend angegeben werden muss, damit ein Rahmen erscheint.
Selektor {border: [Breite] [Stil] [Farbe];} (Reihenfolge egal)
Breite ( "border-width")
Dicke des Rahmen über Größenangen oder Schlüsselwörter (thin (dünn), medium (mittel), thick (dick)).
Stil ( "border-style")
Aussehen der Linie:
none: Kein Rahmen (Standard)
solid: Durchgehende Linie.
dashed: Gestrichelte Linie.
dotted: Gepunktete Linie.
double: Doppelte Linie (benötigt mind. 3px Breite).
groove: 3D-Effekt, der je nach Rahmenfarbe variiert.
ridge: 3D-Effekt, der je nach Rahmenfarbe variiert.
inset: 3D-Effekt, der je nach Rahmenfarbe variiert.
outset: 3D-Effekt, der je nach Rahmenfarbe variiert.
.
Farbe ( "border-color")
Bestimmt die Farbe des Rahmens. Angegeben entweder in Hex-Code, RGB(a), HSL oder Farbnamen
Selektor {border: [Breite] [Stil] [Farbe];} (Reihenfolge egal)<style>
img {
width: 200px;
height: auto;
border: 1px black solid;
}
#pic2 {border-radius: 80px/40px;}
#pic3 {border-radius: 80px;}
#pic4 {border-radius: 50%;}
#pic5 {border-radius: 50% 20px 10px;}
</style>
<img src="avatar.gif" alt="avatar" id="pic1">
<img src="avatar.gif" alt="avatar" id="pic2">
<img src="avatar.gif" alt="avatar" id="pic3">
<img src="avatar.gif" alt="avatar" id="pic4">
<img src="avatar.gif" alt="avatar" id="pic5">
Wenn zwei Zellen unterschiedliche Rahmenstile haben (z. B. verschiedene Farben oder Dicken) und collapse aktiv ist, entscheidet der Browser nach festen Prioritätsregeln, welcher Rahmen gewinnt (meist der dickere oder auffälligere)
Die Eigenschaft "border-spacing" funktioniert nur, wenn "border-collapse: separate" eingestellt ist. Bei "collapse" verschwindet dieser Zwischenraum komplett
Die Eigenschaft "border-radius" funktioniert bei Tabellen oft nicht zuverlässig, wenn "border-collapse: collapse" verwendet wird; hierfür ist meist "separate" erforderlich.