Style borderStyle Eigenschaft

Definition und Verwendung

borderStyle Diese Eigenschaft setzt oder gibt den Stil der Elementumrandung zurück.

Dieser Eigenschaft können ein bis vier Werte zugewiesen werden:

  • Ein Wert, zum Beispiel: p {border-style: solid} - Alle vier Ränder sind flächig
  • Zwei Werte, zum Beispiel: p {border-style: solid dotted} - Die oberen und unteren Ränder sind durchgehende Linien, die rechten und linken Ränder sind gestrichelte Linien
  • Drei Werte, zum Beispiel: p {border-style: solid dotted double} - Der obere Rand ist eine durchgehende Linie, die rechten und linken Ränder sind gepunktete Linien, der untere Rand ist eine doppelte Linie
  • Vier Werte, zum Beispiel: p {border-style: solid dotted double dashed} - Der obere Rand ist eine durchgehende Linie, der rechte Rand ist eine gestrichelte Linie, der untere Rand ist eine doppelte Linie, der linke Rand ist eine gestrichelte Linie

Weitere Informationen:

CSS-Tutorial:CSS-Rahmen

CSS Referenzhandbuch:border-style-Eigenschaft

HTML DOM Referenzhandbuch:border-Attribut

Beispiel

Beispiel 1

Fügt dem <div>-Element einen festen Borderrahmen hinzu:

document.getElementById("myDiv").style.borderStyle = "solid";

Probieren Sie es selbst aus

Beispiel 2

Ändert den Stil der vier Kanten des <div>-Elements:

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Probieren Sie es selbst aus

Beispiel 3

Ruft den Borderrahmenstil des <div>-Elements zurück:

alert(document.getElementById("myDiv").style.borderStyle);

Probieren Sie es selbst aus

Beispiel 4

Demonstration aller verschiedenen Werte:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;

Probieren Sie es selbst aus

Syntax

Ruft den borderStyle-Attribut zurück:

object.style.borderStyle

Setzt den borderStyle-Attribut:

object.style.borderStyle = value
Wert Beschreibung
none Definiert einen unbefestigten Borderrahmen. Standard.
hidden Gleiche Bedeutung wie "none", außer in Konfliktsituationen bei Tabellenelementen.
dotted Definiert einen gepunkteten Borderrahmen.
dashed Definiert einen gepunkteten Borderrahmen.
solid Definiert einen festen Borderrahmen.
double Definiert zwei Grenzen. Die Breite der beiden Ränder ist gleich dem Wert von border-width.
Vertiefung Definiert 3D Vertiefung-Borderrahmen. Der Effekt hängt von border-color von border-color.
Rücken Definiert 3D Rücken-Borderrahmen. Der Effekt hängt von border-color von border-color.
Einfass Definiert 3D Einfass-Borderrahmen. Der Effekt hängt von border-color von border-color.
Wertigkeit. Definiert 3D Ausstoss-Borderrahmen. Der Effekt hängt von der Wertigkeit von border-color ab.
initial Setzt diesen Attributwert auf seinen Standardwert. Siehe initial.
inherit Erbt diesen Attributwert von seinem Elternelement. Siehe inherit.

Technische Details

Standardwert: Keine
Rückgabewert: Zeichenkette, die den Stil der Elementumrandung darstellt.
CSS-Version: CSS1

Browser-Unterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung