CSS-Rahmen-Eigenschaft
Die CSS-Eigenschaft border ist eine Kurzschreibweise, mit der die Werte von border-width, border-style und border-color für alle vier Seiten eines Elements festgelegt werden. Negative Werte sind nicht erlaubt.
Die Kurzschreibweise border wird verwendet, wenn alle vier Seiten gleich sein sollen. Sie können Rahmen mithilfe der Eigenschaften border-width, border-style und border-color ändern, die für jede Seite unterschiedliche Werte festlegen können.
INFO
Wenn der Wert nicht definiert ist, sind die Rahmen unsichtbar.
| Initial Value | medium none currentColor |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Width, color and style of the border are animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.border = "5px solid green"; |
Syntax
Syntax der CSS-Eigenschaft border
border: border-width border-style border-color | initial | inherit;Beispiel für die Eigenschaft border:
Beispiel der CSS-Eigenschaft border mit solid-Wert
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft border</h2>
<p>Der Rahmen dieses Absatzes ist auf "thick solid green" gesetzt.</p>
</body>
</html>Ergebnis
Sehen Sie ein weiteres Beispiel, bei dem der Rahmen gestrichelt ist, die Breite auf 3px gesetzt ist und die Rahmenfarbe blau ist.
Beispiel für die Eigenschaft border mit dem Wert "dashed":
Beispiel der CSS-Eigenschaft border mit dem Wert dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft border</h2>
<p>Der Rahmen dieses Absatzes ist auf "3px dashed blue" gesetzt.</p>
</body>
</html>Sehen wir uns ein weiteres Beispiel mit border-color an, bei dem 3 Werte angewendet werden. Der erste wird auf den oberen Rahmen angewendet, der zweite auf links und rechts und der dritte auf den unteren Rahmen.
Beispiel für die Eigenschaft border mit 3 Werten:
Beispiel der CSS-Eigenschaft border-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft border</h2>
<div>Hier werden 3 Werte auf die Eigenschaft border-color angewendet.</div>
</body>
</html>Beispiel für die Eigenschaft border-style:
Beispiel der CSS-Eigenschaft border mit solid-, dotted- und double-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>Beispiel für die Eigenschaft border</h2>
<p class="border1">Eine Überschrift mit einem soliden grauen Rahmen.</p>
<p class="border2">Eine Überschrift mit einem gepunkteten blauen Rahmen.</p>
<div>Ein div-Element mit einem dicken doppelten grünen Rahmen.</div>
</body>
</html>Werte
| Value | Description |
|---|---|
| border-width | Definiert die Breite des Rahmens. Der Standardwert ist "medium". |
| border-style | Definiert den Stil des Rahmens. Der Standardwert ist "none". |
| border-color | Definiert die Farbe des Rahmens. Der Standardwert ist die aktuelle Farbe des Elements. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Übernimmt die Eigenschaft vom übergeordneten Element. |
Practice
Which of the following are valid border styles in CSS?