CSS Border

CSS Border ist eine Eigenschaft, mit der der Stil des Rahmens eines Elements definiert wird.

Rahmen können auf jedes HTML-Element angewendet werden, um visuelle Effekte zu verbessern, Inhalte zu trennen oder Elemente hervorzuheben.

Zu den CSS-Border-Eigenschaften zählen hauptsächlich Rahmenbreite, Rahmenstil, Rahmenfarbe und Kurzschreibweise-Eigenschaften.

CSS-Border-Eigenschaften

CSS-Border-Eigenschaften ermöglichen es Ihnen, den Stil und die Farbe des Rahmens eines Elements festzulegen.

Rahmen an allen vier Seiten


Roter unterer Rahmen


Abgerundeter Rahmen


Linker Rahmen hat eine Breite, Farbe ist blau

Rahmenstil

Die Eigenschaft border-style gibt an, welche Art von Rahmen angezeigt werden soll.

border-styleDie Eigenschaft wird verwendet, um den Typ des anzuzeigenden Rahmens anzugeben.

Erlaubte Werte sind wie folgt:

  • dotted: Definiert einen gepunkteten Rahmen.
  • dashed: Definiert einen gestrichelten Rahmen.
  • solid: Definiert einen durchgezogenen Rahmen.
  • double: Definiert einen doppelten Rahmen.
  • groove: Definiert einen gerillten 3D-Rahmen. Der Effekt hängt vom Wert von border-color ab.
  • ridge: Definiert einen 3D-Riffelrahmen. Der Effekt hängt vom Wert von border-color ab.
  • inset: Definiert einen 3D-eingelassenen Rahmen. Der Effekt hängt vom Wert von border-color ab.
  • outset: Definiert einen 3D-erhabenen Rahmen. Der Effekt hängt vom Wert von border-color ab.
  • none: Definiert keinen Rahmen.
  • hidden: Definiert einen verborgenen Rahmen.

border-style-Demo:

none: Standardmäßig kein Rahmen


dotted: Definiert einen gepunkteten Rahmen


dashed: Definiert einen gestrichelten Rahmen


solid: Definiert einen durchgezogenen Rahmen


double: Definiert zwei Rahmen. Die Breite der beiden Rahmen entspricht dem Wert von border-width


groove: Definiert einen 3D-Rillenrahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab


ridge: Definiert einen 3D-gerippten Rahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab


inset: Definiert einen 3D-eingebetteten Rahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab


outset: Definiert einen 3D-hervortretenden Rahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab


Selbst ausprobieren »

Rahmenbreite

Sie können die Breite eines Rahmens mit der Eigenschaft border-width festlegen.

Es gibt zwei Möglichkeiten, die Breite eines Rahmens festzulegen: Sie können einen Längenwert angeben, z. B. 2px oder 0.1em (mit Einheiten wie px, pt, cm, em usw.), oder eines der 3 Schlüsselwörter verwenden, nämlich thick, medium (Standardwert) und thin.

Hinweis:CSS definiert die konkreten Breiten der 3 Schlüsselwörter nicht, daher kann ein Benutzer thick, medium und thin auf 5px, 3px bzw. 2px setzen, während ein anderer Benutzer sie auf 3px, 2px bzw. 1px setzen kann.

Beispiel

p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }

Selbst ausprobieren »

Rahmenfarbe

Die Eigenschaft border-color wird verwendet, um die Farbe des Rahmens festzulegen. Die Farben, die festgelegt werden können:

  • name - Gibt den Namen der Farbe an, wie z. B. "red"
  • RGB – Geben Sie RGB-Werte an, z. B. "rgb(255,0,0)"
  • Hex – gibt einen Hexadezimalwert an, z. B. "#ff0000"

Sie können die Farbe des Rahmens auch auf "transparent" setzen.

Hinweis:border-color allein hat keine Wirkung; Sie müssen zuerst border-style verwenden, um den Rahmenstil festzulegen.

Beispiel

p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }

Selbst ausprobieren »

Rahmen – jede Seite einzeln festlegen

In CSS können Sie unterschiedliche Rahmen für verschiedene Seiten festlegen:

Beispiel

p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }

Selbst ausprobieren »

Das obige Beispiel kann auch mit einer einzigen Eigenschaft festgelegt werden:

Beispiel

border-style:dotted solid;

Selbst ausprobieren »

Die border-style-Eigenschaft kann 1-4 Werte haben:

  • border-style:dotted solid double dashed;
    • Der obere Rahmen ist gepunktet
    • Der rechte Rahmen ist durchgezogen
    • Der untere Rahmen ist doppelt
    • Der linke Rahmen ist gestrichelt

  • border-style:dotted solid double;
    • Der obere Rahmen ist gepunktet
    • Der linke und der rechte Rahmen sind durchgezogen
    • Der untere Rahmen ist doppelt

  • border-style:dotted solid;
    • Der obere und der untere Rahmen sind gepunktet
    • Der rechte und der linke Rahmen sind durchgezogen

  • border-style:dotted;
    • Alle vier Rahmen sind gepunktet

Das obige Beispiel verwendet border-style. Es kann jedoch auch zusammen mit border-width und border-color verwendet werden.

Rahmen-Kurzschreibweise

Das obige Beispiel verwendete viele Eigenschaften, um den Rahmen festzulegen.

Du kannst den Rahmen auch mit einer einzigen Eigenschaft festlegen.

In der Eigenschaft "border" kannst du Folgendes festlegen:

  • border-width
  • border-style (erforderlich)
  • border-color

Beispiel

border:5px solid red;

Selbst ausprobieren »

Examples

Weitere Beispiele

Alle Rahmen-Eigenschaften in einer Deklaration
Dieses Beispiel zeigt, wie die Kurzschreibweise verwendet wird, um alle vier Rahmen-Eigenschaften in derselben Deklaration festzulegen.

Stil des unteren Rahmens festlegen
Dieses Beispiel zeigt, wie man den Stil des unteren Rahmens festlegt.

Breite des linken Rahmens festlegen
Dieses Beispiel zeigt, wie man die Breite des linken Rahmens festlegt.

Farbe der vier Rahmen festlegen
Dieses Beispiel zeigt, wie man die Farbe von vier Rahmen festlegt. Es können eine bis vier Farben festgelegt werden.

Farbe des rechten Rahmens festlegen
Dieses Beispiel zeigt, wie man die Farbe des rechten Rahmens festlegt.

Rahmen mit Farbverlauf festlegen
Dieses Beispiel zeigt, wie man Rahmen mit Farbverlauf festlegt.

CSS-Border-Eigenschaften

Eigenschaft Beschreibung
border Eine Kurzschreibweise-Eigenschaft, mit der die Eigenschaften für die vier Seiten in einer einzigen Deklaration festgelegt werden.
border-style Legt den Stil aller Rahmen eines Elements fest oder legt Rahmenstile für jede Seite separat fest.
border-width Eine Kurzschreibweise-Eigenschaft, mit der die Breite für alle Rahmen eines Elements festgelegt wird oder mit der Breiten für den Rahmen jeder Seite separat festgelegt werden.
border-color Eine Kurzschreibweise-Eigenschaft, die die Farbe der sichtbaren Teile aller Rahmen eines Elements festlegt oder Farben für die 4 Seiten separat festlegt.
border-bottom Eine Kurzschreibweise-Eigenschaft, mit der alle Eigenschaften des unteren Rahmens in einer einzigen Deklaration festgelegt werden.
border-bottom-color Legt die Farbe des unteren Rahmens eines Elements fest.
border-bottom-style Legt den Stil des unteren Rahmens eines Elements fest.
border-bottom-width Legt die Breite des unteren Rahmens eines Elements fest.
border-left Eine Kurzform-Eigenschaft, mit der alle Eigenschaften des linken Rahmens in einer einzigen Deklaration festgelegt werden.
border-left-color Legt die Farbe des linken Rahmens eines Elements fest.
border-left-style Legt den Stil des linken Rahmens eines Elements fest.
border-left-width Legt die Breite des linken Rahmens eines Elements fest.
border-right Eine Kurzform-Eigenschaft, mit der alle Eigenschaften des rechten Rahmens in einer einzigen Deklaration festgelegt werden.
border-right-color Legt die Farbe des rechten Rahmens eines Elements fest.
border-right-style Legt den Stil des rechten Rahmens eines Elements fest.
border-right-width Legt die Breite des rechten Rahmens eines Elements fest.
border-top Eine Kurzschrift-Eigenschaft, mit der alle Eigenschaften des oberen Rahmens in einer Deklaration festgelegt werden.
border-top-color Legt die Farbe des oberen Rahmens eines Elements fest.
border-top-style Legt den Stil des oberen Rahmens eines Elements fest.
border-top-width Legt die Breite des oberen Rahmens eines Elements fest.
border-radius Legt den Rahmen mit abgerundeten Ecken fest.
Weitere Erweiterungen