CSS-Eigenschaft border-style
Die CSS-Eigenschaft border-style legt den Stil aller vier Seiten der Rahmen eines Elements fest. Sie ist eine Kurzschreibweise zum Definieren von border-top-style, border-bottom-style, border-left-style, border-right-style.
Diese Eigenschaft nimmt ein bis vier Werte an. Jede Seite kann also ihren eigenen Wert haben.
Der Standardwert von border-style ist none. Rahmen werden über dem Hintergrund des Elements dargestellt.
Außerdem solltest du wissen, dass einige Browser manche Stile nicht unterstützen. Wenn ein Stil normalerweise nicht unterstützt wird, zeichnet der Browser den Rahmen als durchgezogenen Rahmen.
Die Eigenschaft border-style wird mit einem, zwei, drei oder vier Werten definiert. Wenn ein Wert angegeben ist, gilt derselbe Stil für alle vier Seiten. Wenn zwei Werte angegeben sind, gilt der erste Stil für die obere und untere Seite, der zweite für die linke und rechte Seite. Wenn drei Werte angegeben sind, gilt der erste Stil für die obere Seite, der zweite für die linke und rechte Seite, der dritte für die untere Seite. Wenn vier Werte angegeben sind, gelten die Stile für oben, rechts, unten und links in einer Uhrzeiger-Reihenfolge.
| Initial Value | none |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.borderStyle = "dotted double"; |
Syntax
Syntax der CSS-Eigenschaft border-style
border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;Beispiel für die Eigenschaft border-style:
Beispiel der CSS-Eigenschaft border-style mit dem Wert dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-style: dotted;
padding: 5px;
}
</style>
</head>
<body>
<p> Example of dotted border-style.</p>
</body>
</html>Beispiel für die Eigenschaft border-style, bei der jede Seite ihren eigenen Wert hat:
Beispiel der CSS-Eigenschaft border-style mit den Werten double, solid, dashed und dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-width: 4px;
border-style: double solid dashed dotted;
border-color: #1c87c9;
color: #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<p>Example, where each side has own value.</p>
</body>
</html>Ergebnis
Beispiel für die Eigenschaft border-style mit allen Werten:
Beispiel der CSS-Eigenschaft border-style mit den Werten hidden, double, solid, dashed, dotted, groove, ridge, inset und outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #eee;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #c9c5c5;
border: 8px solid #1c87c9;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-style example classes */
.b1 {
border-style: hidden;
}
.b2 {
border-style: dotted;
}
.b3 {
border-style: dashed;
}
.b4 {
border-style: solid;
}
.b5 {
border-style: double;
}
.b6 {
border-style: groove;
}
.b7 {
border-style: ridge;
}
.b8 {
border-style: inset;
}
.b9 {
border-style: outset;
}
</style>
</head>
<body>
<h1>Border-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| none | Zeigt keinen Rahmen an. Standardwert. | Play it » |
| hidden | Dasselbe wie „none“, außer bei der Auflösung von Rahmenkonflikten für Tabellenelemente. | Play it » |
| dotted | Der Rahmen wird als Reihe von Punkten angegeben. | Play it » |
| dashed | Der Rahmen wird als Reihe von Strichen angegeben. | Play it » |
| solid | Der Rahmen wird als durchgezogene Linie angegeben. | Play it » |
| double | Der Rahmen wird als doppelte durchgezogene Linie angegeben. | Play it » |
| groove | Es ist ein 3D-Rillenrahmen und vermittelt den Eindruck, dass der Rahmen eingraviert ist. Das Gegenteil von ridge. | Play it » |
| ridge | Gibt einen 3D-erhabenen Rahmen an und vermittelt den Eindruck einer hervorstehenden Oberfläche. Das Gegenteil von groove. | Play it » |
| inset | Es ist ein 3D-Effekt, der den Eindruck vermittelt, dass das Element eingebettet ist. Das Gegenteil von outset. | Play it » |
| outset | Es ist ein 3D-Effekt, der den Eindruck vermittelt, dass das Element geprägt ist. Das Gegenteil von inset. | Play it » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What are the different types of border styles available in CSS according to w3docs.com?