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:

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

Die CSS-Eigenschaft 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.

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.

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

In CSS3 kommen schmückende Eigenschaften für border mit hinzu: border-radius bringt runde Ecken und border-image erzeugt den Rahmen aus Bitmaps.

border

border
Kurzschrift, die border-width, border-style und border-color in einer Regel zusammenfasst.

border-top | -right | -bottom | -left

.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

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.