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 Shorthand CSS Eigenschaft legt den Linienstil für alle vier Seiten des Rahmens 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: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzform 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 in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).

Jeder Wert ist ein Schlüsselwort aus der unten stehenden Liste.

Werte

<line-style>

Beschreibt den Stil des Rahmens. Er kann die folgenden Werte haben:

none: Wie das Schlüsselwort hidden, zeigt keinen Rahmen an. Sofern kein background-image gesetzt ist, wird der berechnete Wert der selben Seite von border-width 0 sein, auch wenn ein anderer Wert angegeben wurde. Im Falle von Tabellenzellen und Randkollaps hat der Wert none die niedrigste Priorität: Wenn irgendein anderer sich widersprechender Rahmen gesetzt ist, wird dieser angezeigt.
hidden: Wie das Schlüsselwort none, zeigt keinen Rahmen an. Sofern kein background-image gesetzt ist, wird der berechnete Wert der selben Seite von border-width 0 sein, auch wenn ein anderer Wert angegeben wurde. Im Falle von Tabellenzellen und Randkollaps hat der Wert hidden die höchste Priorität: Wenn irgendein anderer sich widersprechender Rahmen gesetzt ist, wird dieser nicht angezeigt.
dotted: Zeigt eine Reihe von abgerundeten Punkten an. Der Abstand der Punkte ist nicht durch die Spezifikation definiert und implementation-spezifisch. Der Radius der Punkte ist die Hälfte des berechneten Wertes der selben Seite von border-width.
dashed: Zeigt eine Reihe von kurzen, quadratisch endenden Strichen oder Liniensegmenten an. Die exakte Größe und Länge der Segmente sind nicht durch die Spezifikation definiert und implementation-spezifisch.
solid: Zeigt eine durchgehende, gerade, feste Linie an.
double: Zeigt zwei gerade Linien, die zusammen die Pixelgröße ergeben, die durch border-width definiert ist.
groove: Zeigt einen Rahmen mit geschnitztem Aussehen. Es ist das Gegenteil von ridge.
ridge: Zeigt einen Rahmen mit erhabenem Aussehen. Es ist das Gegenteil von groove.
inset: Zeigt einen Rahmen, der das Element eingebettet erscheinen lässt. Es ist das Gegenteil von outset. Bei Anwendung auf eine Tabellenzelle mit border-collapse von collapsed, verhält sich dieser Wert wie ridge.
outset: Zeigt einen Rahmen, der das Element geprägt erscheinen lässt. Es ist das Gegenteil von inset. Bei Anwendung auf eine Tabellenzelle mit border-collapse von collapsed, 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 border-bezogenen Shorthand CSS-Eigenschaften: border, border-width, border-color, border-radius