Rahmen und Kontur

border & outline

Für ein gutes Layout spielen Abstände eine große Rolle. Diese kann man mit margin und padding definieren. Man kann die sowohl bei Inline- als auch bei Blockelementen Rahmen border und Konturen outline definieren.

Border und Outline sind 2 Arten einen Rand darzustellen. Im Gegensatz zu border, wird bei outline die Dicke nicht hinzugerechnet sondern die Outline wird sozusagen draufgemalt. Die Outline ist im Gegensatz zu border immer geschlossen. Bei border ist es möglich die einzelnen Seiten unterschiedlich zu definieren. Es gibt Eigenschaften die man border und outline zuweisen kann.

• border outline Selfhtml
• padding Selfhtml
• margin Selfhtml

Neben den Abständen, die unter dem Thema Texteigenschaften aufgeführt wurden (line-height, letter-spacing, word-spacing) geht es hier um Abstände der Blockelemente. Nehmen wir einen Textblock in einem Blockelement wie p oder div, den man sich als geschlossenen Kasten vorstellen kann. Darin befinden sich

• Der Inhalt (Text, Grafik etc.)
• Der Innenabstand des Inhaltes zum Rahmen padding
• Der Rahmen border
• die Kontur outline
• der Außenabstand margin

Rahmen & Kontur Breite

border-width outline-width

Rahmen & Kontur Stil

border-style outline-style

border-style

outline-style

Rahmen & Kontur Farbe

border-color outline-color

Der Wert transparent im Gegensatz zu none unterscheidet sich dadurch, dass der Abstand eingehalten wird. Bei none wird eine Breite von 0 Pixeln eingesetzt.

Einzelne Wertangaben

Man kann für border, jedoch nicht für outline für jede Seite eine separate Werteangabe eingeben. Es gibt 2 Möglichkeiten. Entweder man führt die einzelnen Eigenschaften in bestimmter Reihenfolge auf, oder man benutzt für jede Seite ein bestimmtes Schlüsselwort.

so sieht's aus

Schlüsselworte top right bottom left

Mit diesen 4 Schlüsselworten oder Eigenschaften kann man für jede Seite extra Werte vergeben.

Reihenfolge

Man kann auf die Einzelangaben verzichten um für einzelne Seiten verschiedene Werte zu vergeben. In dem Fall muss man bestimmte Reihenfolgen einhalten. Möglich sind folgende Arten. Die Werte werden mit Leerzeichen getrennt.

so sieht's aus bei 3 Wertangaben

Kurzform von Rahmen

Die verschiedenen Eigenschaften kann man in Kurzform notieren. Die Werte werden durch Leerzeichen getrennt

border: border-width border-style border-color

Auch die Rahmeneigenschaften für die einzelnen Seiten kann man in Kurzform notieren.

border-top: border-width border-style border-color;

Abgerundete Ecken

border-radius

CSS3 bietet die Möglichkeit abgerundete Ecken zu definieren. Gibt man einen radius Wert von 50% für alle 4 Ecken an, bekommt man einen Kreis.

so sieht's aus

border-radius: 5px;

Auch hier hat man die Möglichkeit mehrere Werte für die einzelnen Ecken anzugeben.

so sieht's aus

Mehr Möglichkeiten mit der Langform

Man kann für eine oder mehr Ecken individuelle Werte eingeben. Das macht man mit folgenden Eigenschaften. Hier sind dann 2 Werte möglich. Der erste Wert bestimmt, wie breit sich die Rundung ausbreitet. Wenn der erste Wert 100% ist erstreckt sich die Rundung über die gesamte Breite. Wenn der erste Wert 50% ist beginnt er in der Mitte der Breite. Der zweite Wert macht das gleiche in Bezug auf die Höhe.
Achtung! Der erste Wert muss höher als 0 Pixel sein.

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

div {border-top-left-radius: 100% 50%;}

Beispiel 1
Beispiel 2
Beispiel 3

Auch hier ist eine Kurzschreibweise möglich, wenn man für alle 4 Ecken 2 gleiche Werte vergeben will, kann man das auch folgendermaßen notieren.

div {border-radius: 10% 50%;}

Interaktiver Border Radius

Hier kannst du für jede Ecke 2 prozentuale Werte ausprobieren.

border-top-right-radius:

border-bottom-right-radius:

border-top-left-radius:

border-bottom-left-radius:

width:

4 Beispiele border-radius Langform.

#box1, #box2, #box3, #box4 {
    border: 1px solid #000;
}

#box1 {
    width: 50px;
    height: 100px;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;
}

#box2 {
    width: 50px;
    hight: 100px;
    border-top-right-radius: 100% 50%;
    border-bottom-right-radius: 100% 50%;
}

#box3 {
    width: 100px;
    height: 50px;
    border-bottom-left-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
}

#box4 {
    width: 100px;
    height: 50px;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
}

Border collapse für Tabellen

Wenn man Tabellenzellen Rahmen zuweist, werden die einzelnen Rahmenlinien der Zellen standardmäßig mit einem kleinen Zwischenraum getrennt. Mit der Eigenschaft border-collapse für Tabellen kann man den Zwischenraum unterbinden.

Achtung! Beachten Sie, dass die Eigenschaft nicht den Zellen sondern dem table Element zugewiesen wird.

so sieht's aus

table {border-collapse: collapse;}

Border spacing für Tabellen

Der Abstand zwischen den Zellen in Tabellen wird mit border-spacing definiert.

Achtung! Beachten Sie, dass die Eigenschaft nicht den Zellen sondern dem table Element zugewiesen wird.

so sieht's aus

table {border-spacing: 20px;}

Rahmen mit Bildern

border-image

CSS3 bietet die Möglichkeit mittels border-image Rahmen mit Bildern zu versehen. Die Bilder können gekachelt werden oder gestreckt werden. Hier müssen noch Browser Präfixe eingesetzt werden.

Siehe dazu border-image w3schools

Beispiel

Bild download

div {
  border: wert1 solid transparent;
  border-image: url(wert) wert1 wert2 wert3 wert4 schlüsselwort;
}