8.1 Das border-Attribut
Rahmen sind ein wichtiger Aspekt des Webdesigns. Sie heben Elemente hervor und verbessern die visuelle Wahrnehmung der Seite. CSS bietet viele Eigenschaften zur Erstellung und Stilisierung von Rahmen. Lassen uns die grundlegenden Rahmenattribute betrachten, einschließlich der kompakten und vollständigen Schreibweise sowie der Eigenschaften für die Breite, den Stil, die Farbe und die abgerundeten Ecken der Rahmen.
Grundlegende Parameter
Die grundlegenden Rahmenparameter können durch separate Eigenschaften festgelegt werden: border-width, border-style und border-color.
Syntax:
element {
border-width: width;
border-style: style;
border-color: color;
}
Beispiel zur Verwendung:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Kompakte Schreibweise
Das Attribut border ermöglicht es, alle grundlegenden Rahmenparameter (Breite, Stil und Farbe) in einer Zeile festzulegen.
Syntax:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Kompakte Schreibweise</div>
<div class="border-full">Volle Schreibweise</div>
</body>
8.2 Rahmenbreite: border-width
Das Attribut border-width legt die Breite des Rahmens fest. Die Werte können in Pixeln (px), Punkten (pt), Prozenten (%) oder Schlüsselwörtern (thin, medium, thick) angegeben werden.
Syntax:
element {
border-width: width;
}
Beispiel:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Dünner Rahmen</div>
<div class="border-medium">Mittlerer Rahmen</div>
<div class="border-thick">Dicker Rahmen</div>
<div class="border-custom">Rahmen mit 5px Breite</div>
</body>
8.3 Rahmenstil: border-style
Beschreibung:
Das Attribut border-style legt den Stil des Rahmens fest. Die Stiloptionen umfassen:
none: ohne Rahmensolid: durchgezogene Liniedotted: gepunktete Liniedashed: gestrichelte Liniedouble: doppelte Liniegroove: Rahmen in Form einer Rilleridge: Rahmen in Form eines Gratsinset: eingedrückter Rahmenoutset: erhabener Rahmen
Syntax:
element {
border-style: style;
}
Beispiel:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Ohne Rahmen</div>
<div class="border-solid">Durchgehende Linie</div>
<div class="border-dotted">Gepunktete Linie</div>
<div class="border-dashed">Gestrichelte Linie</div>
<div class="border-double">Doppelte Linie</div>
<div class="border-groove">Rillenrahmen</div>
<div class="border-ridge">Gratrahmen</div>
<div class="border-inset">Eingedrückter Rahmen</div>
<div class="border-outset">Erhabener Rahmen</div>
</body>
8.4 Rahmenfarbe: border-color
Das Attribut border-color legt die Farbe des Rahmens fest. Die Farbe kann in verschiedenen Formaten angegeben werden: Farbnamen, hexadezimale Codes, RGB, RGBA, HSL, HSLA.
Syntax:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Roter Rahmen</div>
<div class="border-blue">Blauer Rahmen</div>
<div class="border-green">Grüner Rahmen</div>
<div class="border-rgba">Halbtransparenter roter Rahmen</div>
</body>
8.5 Abgerundete Ecken mit border-radius
Das Attribut border-radius ermöglicht es, Ecken von Elementen abzurunden und abgerundete Rahmen zu erstellen. Es kann auf alle vier Ecken gleichzeitig oder auf jede Ecke einzeln angewendet werden.
Syntax:
element {
border-radius: radius;
}
Werte:
- Einheitlicher Wert: z.B.
border-radius: 10px;— setzt denselben Abrundungsradius für alle Ecken - Zwei Werte: z.B.
border-radius: 10px 20px;— der erste Wert für die oberen linken und unteren rechten Ecken, der zweite für die oberen rechten und unteren linken Ecken - Vier Werte: z.B.
border-radius: 10px 20px 30px 40px;— setzt die Radien für die obere linke, obere rechte, untere rechte und untere linke Ecke entsprechend fest - Gemischte Werte: die Radien können in Prozent angegeben werden, was es ermöglicht, die Abrundung an die Größe des Elements anzupassen
Beispiel:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Abrundung aller Ecken</div>
<div class="radius-top">Abrundung der oberen Ecken</div>
<div class="radius-bottom">Abrundung der unteren Ecken</div>
<div class="radius-mixed">Gemischte Abrundung der Ecken</div>
</body>
.radius-all: wendet denselben Abrundungsradius (15px) auf alle Ecken an.radius-top: wendet eine Abrundung (20px) nur auf die oberen Ecken an.radius-bottom: wendet eine Abrundung (25px) nur auf die unteren Ecken an.radius-mixed: wendet unterschiedliche Radienwerte auf jede Ecke an
GO TO FULL VERSION