CSS border – Rahmen

CSS border – sichtbarer Rahmen

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: border-color für die Farbe des Rahmens, border-style für Linien, Punkte oder doppelte Linien und border-width für die Breite von border.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

border style = Farbe, Linie, Breite

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
  1. Farbe border-color
  2. Breite border-width
  3. Stil border-style

Die Reihenfolge ist beliebig, aber der Wert für border-style muss vorhanden sein, ansonsten wird border nicht gerendert.

falter-17
falter-18

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
ridge
inset
outset

border-bottom: 1px dotted gray ist z.B. eine CSS-Eigenschaft, um einen Ausdruck in einem HTML abbr-Tag nach außen zu kennzeichnen.

KUCA

Die gestrichelte Linie ist ein zarter Hinweis und soll sich von text-decoration:underline unterscheiden: Beim Hovern über dem abgekürzten Begriff (HTML abbr) wird die Erklärung angezeigt.

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} Wir können eine, zwei, drei oder vier Stile notieren:

  • 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