Jedes HTML-Element hat einen Rahmen. Normalerweise ist er unsichtbar und von der Breite 0. Diesen Rahmen
kann man mit dem CSS-Attribtue border festlegen.
Name
Wert
border-width
thin, medium, thick oder
Breite in Pixeln (z.B. 5px)
border-style
dotted
dashed
solid
double
groove
ridge
inset
outset
border-style:
dotted double solid groove;
none
hidden
border-color
Die Farbe des Rahmens. dotted
dotted
Jeder Rahmen hat einen äußeren Abstand den margin und einen inneren Abstand das padding.
Mit margin-width und padding-width kann man deren Breite einstellen.
margin
border
padding
Inhalt
Man kann die einzelnen Abstände und Rahmen entweder mit left, right, top und bottom festlegen (z.B.
border-top, margin-top, padding-top, etc) oder man legt alle auf einmal fest:
Bei einem Wert gilt er für alle 4 Ränder. border-width: 3px; legt den top, bottom, left und
right Rahmen auf 3 Pixel fest.
Bei zwei Werten gilt der erste für top und bottom und der zweite für left und
right.
Bsp:
border-width: 1px 4px;
Bei drei Werten gilt der erste für top und der zweite für left und right und der
dritte für bottom.
Bsp:
border-width: 0px 4px 1px;
Bei vier Werten gilt der erste für top, der zweite für right, der dritte für
bottom und der vierte für left.
Bsp:
border-width: 1px 2px 4px 8px;
Die selbe Reihenfolge gilt auch für die Rahmenfarbe.
Beispiel:
<pstyle="border-width: 0px 10px; padding:0px 10px; border-color:red; background-color:yellow;border-style:solid;">
Dies ist ein <br>
wichtiger<br>
Text </p>
Dies ist ein
wichtiger
Text
Rahmenecken
Mit der CSS-Eigenschaft border-radius können die Ecken abgerundet werden.
Beispiel:
Eine zentrierte Überschrift mit einem "rundem" Rahmen von 2 Punkten.