border-style CSS-Eigenschaft

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: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

Zusammengesetzte Eigenschaften

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

• border-bottom-style
• border-left-style
• border-right-style
• border-top-style

Syntax

/* 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.
• Bei zwei angegebenen Werten gilt der erste Stil für oben und unten, der zweite für links und rechts.
• Bei drei angegebenen Werten gilt der erste Stil für oben, der zweite für links und rechts, der dritte für unten.
• Bei vier angegebenen Werten gelten die Stile in der Reihenfolge oben, rechts, unten und links (im Uhrzeigersinn).

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

Werte

<line-style>

Beschreibt den Stil des Rahmens. Es kann folgende Werte haben:

none

Wie das hidden Schlüsselwort, zeigt keinen Rahmen an. Es sei denn, es ist ein background-image festgelegt, der benutzte Wert der border-width der gleichen Seite wird 0 sein, selbst wenn der angegebene Wert etwas anderes ist. Im Fall von Tabellenzellen und Rahmenüberlappung hat der Wert none die niedrigste Priorität: Wenn ein anderer widersprüchlicher Rahmen gesetzt ist, wird er angezeigt.

hidden

Wie das none Schlüsselwort, zeigt keinen Rahmen an. Es sei denn, es ist ein background-image festgelegt, der benutzte Wert der border-width der gleichen Seite wird 0 sein, selbst wenn der angegebene Wert etwas anderes ist. Im Fall von Tabellenzellen und Rahmenüberlappung hat der Wert hidden die höchste Priorität: Wenn ein anderer widersprüchlicher Rahmen gesetzt ist, wird er nicht angezeigt.

dotted

Zeigt eine Reihe von abgerundeten Punkten an. Der Abstand der Punkte ist in der Spezifikation nicht definiert und implementationsspezifisch. Der Radius der Punkte ist die Hälfte des berechneten Werts der border-width der gleichen Seite.

dashed

Zeigt eine Reihe von kurzen, quadratisch endenden Strichen oder Linienelementen an. Die genaue Größe und Länge der Segmente ist in der Spezifikation nicht definiert und implementationsspezifisch.

solid

Zeigt eine einzelne, gerade, durchgehende Linie an.

double

Zeigt zwei gerade Linien an, die zusammen die durch border-width definierte Pixelgröße ergeben.

groove

Zeigt einen Rahmen mit einer eingeschnittenen Erscheinung an. Es ist das Gegenteil von ridge.

ridge

Zeigt einen Rahmen mit einer erhabenen Erscheinung an. Es ist das Gegenteil von groove.

inset

Zeigt einen Rahmen an, der das Element eingebettet erscheinen lässt. Es ist das Gegenteil von outset. Wenn es auf eine Tabellenzelle mit border-collapse collapsed angewendet wird, verhält sich dieser Wert wie ridge.

outset

Zeigt einen Rahmen an, der das Element erhaben erscheinen lässt. Es ist das Gegenteil von inset. Wenn es auf eine Tabellenzelle mit border-collapse collapsed angewendet wird, verhält sich dieser Wert wie groove.

Formale Definition

Formale Syntax

border-style = 
  <'border-top-style'>{1,4}  

<border-top-style> = 
  <line-style>  

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

Beispiele

Alle Eigenschaftswerte

Hier ist ein Beispiel für alle Eigenschaftswerte.

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

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

Browser-Kompatibilität

Siehe auch

• Die Kurzschreibweisen für rahmenbezogene CSS-Eigenschaften: border, border-width, border-color, border-radius