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 Kurzform 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 ist, gilt derselbe Stil für alle vier Seiten.
• Wenn zwei Werte angegeben sind, gilt der erste Stil für oben und unten, der zweite für links und rechts.
• Wenn drei Werte angegeben sind, gilt der erste Stil für oben, der zweite für links und rechts, der dritte für unten.
• Wenn vier Werte angegeben sind, gelten die Stile in dieser Reihenfolge (im Uhrzeigersinn) für oben, rechts, unten und links.

Jeder Wert ist ein aus der Liste unten gewähltes Schlüsselwort.

Werte

<line-style>

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

none

Wie das hidden Schlüsselwort zeigt keinen Rahmen an. Sofern kein background-image gesetzt ist, wird der verwendete Wert derselben Seite der border-width 0 sein, selbst wenn ein anderer Wert angegeben ist. Im Fall von Tabellenzellen und Rahmenzusammenführung hat der none Wert die niedrigste Priorität: Wenn ein anderer, widersprüchlicher Rahmen gesetzt ist, wird dieser angezeigt.

hidden

Wie das none Schlüsselwort zeigt keinen Rahmen an. Sofern kein background-image gesetzt ist, wird der verwendete Wert derselben Seite der border-width 0 sein, selbst wenn ein anderer Wert angegeben ist. Im Fall von Tabellenzellen und Rahmenzusammenführung hat der hidden Wert die höchste Priorität: Wenn ein anderer, widersprüchlicher 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 implementierungsspezifisch. Der Radius der Punkte beträgt die Hälfte des berechneten Wertes der betreffenden Seite der border-width.

dashed

Zeigt eine Reihe von kurzen, quadratisch abgerundeten Strichen oder Liniensegmenten an. Die genaue Größe und Länge der Segmente ist nicht durch die Spezifikation definiert und implementierungsspezifisch.

solid

Zeigt eine einzige, gerade, durchgehende Linie an.

double

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

groove

Zeigt einen Rahmen mit eingraviertem Erscheinungsbild an. Es ist das Gegenteil von ridge.

ridge

Zeigt einen Rahmen mit erhabenem Erscheinungsbild an. Es ist das Gegenteil von groove.

inset

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

outset

Zeigt einen Rahmen, der das Element erhaben erscheinen lässt. Es ist das Gegenteil von inset. Wenn auf eine Tabellenzelle mit border-collapse gesetzt wird collapsed, 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 framebezogenen Shorthand-CSS-Eigenschaften: border, border-width, border-color, border-radius