Die CSS-Eigenschaft border ist eine Shorthand-Eigenschaft, die die Werte border-width, border-style und border-color für alle vier Seiten eines Elements einstellt. Negative Werte sind nicht erlaubt.
Die Shorthand-Eigenschaft border wird verwendet, wenn Sie alle vier Seiten gleich machen mächten. Sie können die Grenzen mithilfe der Eigenschaftenborder-width, border-style und border-color ändern. Sie können auch jede Seite mit unterschiedlichen Werten einstellen.
| Anfangswert | medium none currentColor |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Ja. Breite, Farbe und Stil des Borders sind animierbar. |
| Version | CSS1 |
| DOM Syntax | object.style.border = "5px solid green"; |
Syntax
border: border-width border-style border-color | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft border</h2>
<p>Der Rand dieses Absatzes ist auf "thick solid green" gesetzt.</p>
</body>
</html>Sehen Sie ein weiteres Beispiel, wo der Stil des Rahmens gestrichelt, die Breite auf 3px eingestellt und die Farbe des Rahmens blau ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft border</h2>
<p>Der Rand dieses Absatzes ist auf "3px dashed blue" gesetzt.</p>
</body>
</html>Betrachten wir ein anderes Beispiel mit der Eigenschaft border-color, wo 3 Werte angewendet werden. Der erste wird auf den oberen Rand aufgebracht, der zweite auf rechts und links und der dritte auf den unteren.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft border</h2>
<div>Hier werden 3 Werte auf die Eigenschaft border-color angewendet.</div>
</body>
</html>Ein weiteres Beispiel, wo drei Eigenschaften angewendet werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
p, div {
padding: 5px;
}
.border1 {
border: 5px solid #ccc;
}
.border2 {
border: 5px dotted #1c87c9;
}
div {
border: thick double #8ebf42;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft border</h2>
<p class="border1">Eine Überschrift mit einem durchgehend grauen Rand.</p>
<p class="border2">Eine Überschrift mit einem gestrichelten blauen Rand.</p>
<div>Ein div-Element mit einem dicken, doppelten grünen Rand.</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| border-width | Es definiert die Breite des Rahmens. Der Standardwert ist "medium". |
| border-style | Es definiert den Stil des Rahmens. Der Standardwert ist "none". |
| border-color | Es definiert die Farbe des Rahmens. Der Standardwert ist die aktuelle Farbe des Elements. |
| initial | Es setzt die Eigenschaft auf den Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Übe dein Wissen
