CSS, HTML und Javascript mit {stil}

CSS border – Rahmen

CSS border: sichtbarer Rahmen

CSS border ist eine Kurzschrift, die alle Eigenschaften eines sichtbaren Rahmens um ein HTML-Element zusammenfasst. Drei Angaben sind erforderlich, damit der Browser einen sichtbaren Rahmen rendert:

  1. Farbe border-color
  2. Breite border-width
  3. Stil border-style

Damit Eigenschaften wie border-top-style individuell deklariert werden können, müssen border-top-color und border-top-width definiert werden. Erst dann wird der Rahmen vom Browser angezeigt oder »gerendert«.

Die einfachste Form, den Rahmen eines Elements festzulegen, stellt die Kurznotation border dar:

#main { border: 1px solid silver; }
                 ^    ^      ^
                 |    |      |
                 |    |      +------ border-color
                 |    +------------- border-style
                 +------------------ border-width

Die Breite des Rahmens wird (genauso wie bei CSS padding) im klassischen Box-Modell mit zur Breite des HTML-Elements gezählt – für ein pixelgenaues Layout im Webdesign ist das Rechnen mit border, padding und der Breite des Elements entscheidend.

border

.box { border: 8px solid blue; }
border
Kurzschrift (shorthand), die border-width, border-style und border-color in einer Regel zusammenfasst.
.box { border-bottom: 4px solid mediumgray; }
border-top, border-right, border-bottom, border-left
Kurzschrift für border-top-width, border-top-style und border-top-color in einer Regel

CSS border ist nicht erblich – d.h., Elemente, die innerhalb eines Elements liegen, für das ein Rahmen vereinbart wurde, erhalten nicht automatisch ebenfalls einen Rahmen.

Allerdings kann border die Textfarbe erben: Wenn für ein Element color und border in einer Deklaration festgelegt werden, und border ohne color notiert wird.

Wird die Textfarbe geändert, zieht die Farbe für border automatisch mit. Dieses Verhalten zeigen auch outline und box-shadow.

h2 {
   color: firebrick;
   border: 8px solid;
}

border-style

border-style
legt den Stil aller vier Rahmenseiten fest.
Werte
[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4}
none
hidden
dotted
dashed
solid
double
groove
inset
outset

border-color

border-color
steuert die Farbe des Rahmens an allen vier Seiten.
Werte
color {1,4} | transparent
<div style="border-color: thistle  plum  violet orchid">
                              ^      ^      ^      ^
                              |      |      |      +-- border-left-color
                              |      |      +-- border-bottom-color
                              |      +-- border-right-color
                              +-- border-top-color

{1,4} Sie können eine, zwei, drei oder vier Stile angeben:

  • Ein Stil legt fest, dass alle vier Rahmenseiten in diesem Stil dargestellt werden.
  • Zwei Stile legen fest, dass die obere und untere Rahmenseite mit der ersten Angabe und die rechte und linke Rahmenseite im zweiten Stil dargestellt.
  • Drei Stile legen fest, dass die obere Rahmenseite mit dem ersten, die rechte und linke Rahmenseite mit dem zweiten und die untere Rahmenseite mit dem dritten Stil dargestellt.
  • Vier Stile legen die Reihenfolge top, right, bottom, left fest.

box-sizing: border-box

Mit box-sizing: border-box rechnen die Browser border und padding in die Breite der Box hinein. Das macht das Handling mit border, padding, width und height einfacher.

Box-Modell ohne box-sizing
.box {
    border: 10px solid gray; 
    padding: 15px; 
    width: 200px;

}

Breite der Box = 2 x 10px + 2 x 15px + 200px = 250px

Box-Modell mit box-sizing
.box {
    box-sizing: border-box; 
    border: 10px solid gray; 
    padding: 15px; 
    width: 200px;
}

Breite der Box = 200px