css mit Adi Prinz

border-style

Mit border-style wird die Rahmenart definiert, border-style ist nicht vererbbar.

div { border-style: solid; }

Mögliche Werte für border-style

• none: kein Rahmen
• hidden: kein Rahmen bzw. unsichtbarer Rahmen, für Tabellenzellen
• dotted: gepunktet
• dashed: gestrichelt
• solid: durchgezogen
• double: doppelt
• groove: 3D-Effekt
• ridge: 3D-Effekt
• inset: 3D-Effekt
• outset: 3D-Effekt

Die border-style Eigenschaft kann noch bis zu vier unterschiedliche Linienarten aufnehmen.

div { border-style: dotted solid double dashed; } 

• top border ist dotted
• right border ist solid
• bottom border ist double
• left border ist dashed

div { border-style: dotted solid double; } 

• top border ist dotted
• right und left borders sind solid
• bottom border ist double

div { border-style: dotted solid; } 

• top und bottom borders sind dotted
• right und left borders sind solid

Alternativ werden mit den Eigenschaften border-bottom-style, border-top-style, border-left-style und border-right-style die vier Rahmen des Rechtecks definieren.

border-width

Mit border-width wird die Rahmenbreite (linienstärke) definiert, border-width ist nicht vererbbar.

div { 
  border-style: solid;
  border-width: 2px; 
}

Mögliche Werte für border-width

• thin: dünn
• medium: mittel
• thick: dick
• Längenangabe

Die border-width Eigenschaft kann wie border-style bis zu vier unterschiedliche Wertangaben aufnehmen. Die Reihenfolge ist dieselbe wie bei border-style. Alternativ werden mit den Eigenschaften border-bottom-width, border-top-width, border-left-width und border-right-width die vier Rahmenbreiten des Rechtecks definieren.

border-color

Mit border-color wird die Rahmenfarbe definiert, border-color ist nicht vererbbar.

div { 
  border-style: solid;
  border-width: 2px; 
  border-color: #f00;
}

Mögliche Werte für border-color

• Farbangabe
• transparent

Die border-color Eigenschaft kann wie border-style bis zu vier unterschiedliche Wertangaben aufnehmen. Die Reihenfolge ist dieselbe wie bei border-style. Alternativ werden mit den Eigenschaften border-bottom-color, border-top-color, border-left-color und border-right-color die vier Rahmenfarben des Rechtecks definieren.

border-top, border-bottom, border-left, border-right

Mit border-top, border-bottom, border-left und border-right gibt es noch eine Zusammenfassung der Rahmenseiten, diese Attribute sind nicht vererbbar.

div { 
  border-top: thick double #f00;
  border-bottom: thick double #f00; 
  border-left: 2px solid #0f0;
  border-right: 2px solid #0f0;
}

border

Mit border gibt es noch eine Zusammenfassung der Attribute border-color border-style border-width für alle vier Rahmenseiten. Die Reihenfolge der Angaben ist egal, border ist nicht vererbbar.

div { 
  border: thick double #f00;
}

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

Mit border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius gibt es die Möglichkeit, eine oder mehrere der vier Ecken abzurunden, diese Attribute sind nicht vererbbar.

div {
  border: 2px solid #000;
  border-bottom-left-radius: 2em;
}

Mögliche Werte für border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

• Längenangabe
• Prozentwert

border-radius

Mit border-radius steht wiederum eine Zusammenfassung zur Verfügung. Dabei ist die Reihenfolge zu beachten. Die Reihenfolge lautet:

1. top-left
2. top-right
3. bottom-right
4. bottom-left

Wenn bottom-left fehlt ist es gleich wie top-right. Wenn bottom-right fehlt ist es gleich wie top-left. Wenn top-right fehlt ist es gleich wie top-left. Wenn sie nur eine Angabe machen, werden alle Ecken gleich abgerundet.

div {
  border: 2px solid #000;
  border-radius: 2em;
}

border-image

border-image bietet die Möglichkeit, ein Bild oder einen Farbverlauf als Rahmen zu verwenden. Damit der Bildrahmen Platz erhält, wird in der Regel zusätzlich eine Rahmenbreite mit border oder border-width festgelegt. Die Eigenschaft ist nicht vererbbar.

div {
    border: 10px solid transparent;
    border-image: url(rahmen.png) 30 repeat;
}

Mögliche Werte für border-image

• border-image-source: Bildpfad
• border-image-slice: Aufteilung des Bildes
• border-image-width: Breite des Bildes
• border-image-outset: Wert außerhalb des Bildrahmens
• border-image-repeat: Bildwiederholung Slice wird ggf. abgeschnitten (repeat), Bild wird gedehnt keine Wiederholung (stretch), Bildwiederholung Größe wird angepasst (round), Bildwiederholung Leerraum wird angepasst (space)

Die border-image Eigenschaft ist eine Zusammenfassung der Attribute von border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat.

border-image-source

Mit border-image-source wird die Bildquelle (Pfad) definiert, border-image-source ist nicht vererbbar.

div {
    border: 10px solid transparent;
    border-image-source: url(rahmen.png);
}

Mögliche Werte für border-image-source

• none: kein Bild
• url: Bildpfad

border-image-slice

Mit border-image-slice wird das Bild in Teile zerschnitten. Es sind bis zu vier Werte zum Eingeben (vier Ecken) plus das Attribut fill für den Mittelteil des Bildes. border-image-slice ist nicht vererbbar.

div {
    border: 10px solid transparent;
    border-image-slice: 30 fill;
}

Mögliche Werte für border-image-slice

• Zahl: repräsentiert Pixel bei Pixelgrafiken und Koordinaten bei Vektorgrafiken
• Prozentwert
• fill: Zusätzlicher Wert für den Mittelteil

• Eine Angabe: alle 4 Schnitte gleich
• Zwei Angaben: 1. oben und unten 2. links und rechts
• Drei Angaben: 1. oben 2. links und rechts 3. unten
• Vier Angaben: 1. oben 2. rechts 3. unten 4. links

border-image-width

Mit border-image-width wird die Breite des Bildrahmens definiert. Es sind bis zu vier Werte zum Eingeben bzw auto, border-image-width ist nicht vererbbar.

div {
    border: 10px solid transparent;
    border-image-width: 30px 10px;
}

Mögliche Werte für border-image-width

• Längenangabe: in Pixel
• Zahl: 1 ist Standardwert abhängig der Breite im border-Attribut
• Prozentwert
• auto: abhängig vom Attribut image-slice

border-image-outset

border-image-outset beschreibt die Eigenschaft, wie weit das Bild aus dem Rahmen hinausragen soll, border-image-outset ist nicht vererbbar.

div {
    border: 10px solid transparent;
    border-image-outset: 10px;
}

Mögliche Werte für border-image-outset

• Längenangabe: in Pixel
• Zahl: 1 ist Standardwert abhängig der Breite im border-Attribut

border-image-repeat

border-image-repeat beschreibt die Eigenschaft, wie Slices aufgeteilt werden, border-image-repeat ist nicht vererbbar.

div {
    border: 10px solid transparent;
    border-image-repeat: stretch;
}

Mögliche Werte für border-image-repeat

• stretch: Bild wird gedehnt keine Wiederholung
• repeat: Bildwiederholung Slice wird ggf. abgeschnitten
• round: Bildwiederholung Größe wird angepasst
• space: Bildwiederholung; zusätzlicher Leerraum wird zwischen den Bildteilen verteilt