border-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die border-style Kurzschreibweise der CSS Eigenschaft legt den Linienstil für alle vier Seiten des Rands eines Elements fest.

Probieren Sie es aus

border-style: none;

border-style: dotted;

border-style: inset;

border-style: dashed solid;

border-style: dashed double none;

border-style: dashed groove none dotted;

<section id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eee;
  color: #000;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: #fff;
}

Bestandteilige Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css

/* Keyword values */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;

Die border-style Eigenschaft kann mit einem, zwei, drei oder vier Werten angegeben werden.

Wenn ein Wert angegeben wird, gilt derselbe Stil für alle vier Seiten.
Wenn zwei Werte angegeben werden, gilt der erste Stil für oben und unten, der zweite für links und rechts.
Wenn drei Werte angegeben werden, gilt der erste Stil für oben, der zweite für links und rechts, der dritte für unten.
Wenn vier Werte angegeben werden, gelten die Stile für oben, rechts, unten und links in dieser Reihenfolge (im Uhrzeigersinn).

Jeder Wert ist ein Schlüsselwort, das aus der folgenden Liste ausgewählt wird.

Werte

<line-style>

Beschreibt den Stil des Randes. Folgende Werte sind möglich:

none: Wie das Schlüsselwort hidden, zeigt keinen Rand an. Es sei denn, ein background-image ist gesetzt, wird der berechnete Wert der gleichen Seite der border-width 0 sein, selbst wenn der angegebene Wert etwas anderes ist. Im Fall von Tabellenzellen und Randkollisionen hat der Wert none die niedrigste Priorität: Wenn ein anderer widersprüchlicher Rand gesetzt ist, wird dieser angezeigt.
hidden: Wie das Schlüsselwort none, zeigt keinen Rand an. Es sei denn, ein background-image ist gesetzt, wird der berechnete Wert der gleichen Seite der border-width 0 sein, selbst wenn der angegebene Wert etwas anderes ist. Im Fall von Tabellenzellen und Randkollisionen hat der Wert hidden die höchste Priorität: Wenn ein anderer widersprüchlicher Rand gesetzt ist, wird dieser nicht angezeigt.
dotted: Zeigt eine Reihe von abgerundeten Punkten an. Der Abstand der Punkte wird von der Spezifikation nicht definiert und ist implementierungsspezifisch. Der Radius der Punkte ist die Hälfte des berechneten Wertes der gleichen Seite der border-width.
dashed: Zeigt eine Reihe von kurzen, quadratisch endenden Strichen oder Liniensegmenten an. Die genaue Größe und Länge der Segmente wird von der Spezifikation nicht definiert und ist implementierungsspezifisch.
solid: Zeigt eine einzige, gerade, durchgezogene Linie an.
double: Zeigt zwei gerade Linien, die zusammen die Pixelgröße ergeben, die durch border-width definiert ist.
groove: Zeigt einen Rand mit geschnitztem Aussehen. Es ist das Gegenteil von ridge.
ridge: Zeigt einen Rand mit erhabenem Aussehen. Es ist das Gegenteil von groove.
inset: Zeigt einen Rand, der das Element eingebettet erscheinen lässt. Es ist das Gegenteil von outset. Wenn es auf eine Tabellenzelle mit border-collapse gesetzt auf collapsed angewendet wird, verhält sich dieser Wert wie ridge.
outset: Zeigt einen Rand, der das Element erhaben erscheinen lässt. Es ist das Gegenteil von inset. Wenn es auf eine Tabellenzelle mit border-collapse gesetzt auf collapsed angewendet wird, verhält sich dieser Wert wie groove.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter`.
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `border-bottom-style`: wie angegeben `border-left-style`: wie angegeben `border-right-style`: wie angegeben `border-top-style`: wie angegeben
Animationstyp	diskret

Formale Syntax

border-style = 
  <line-style>{1,4}  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Beispiele

Alle Eigenschaftswerte

Hier ist ein Beispiel für alle Eigenschaftswerte.

HTML

html

<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>

CSS

css

pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/* border-style example classes */
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3 # border-style

Browser-Kompatibilität

Siehe auch

Die Rand-bezogenen CSS-Kurzschreibeeigenschaften: border, border-width, border-color, border-radius