-webkit-border-before

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die -webkit-border-before CSS-Eigenschaft ist eine Kurzschreibweise, um die individuellen logischen Eigenschaften des Blockanfangsrahmens an einer einzigen Stelle im Stylesheet festzulegen.

Bestandteileigenschaften

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

Syntax

css
/* Border values */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

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

Werte

Eines oder mehrere der folgenden, in beliebiger Reihenfolge:

<'border-width'>

Siehe border-width

<'border-style'>

Siehe border-style

<'color'>

Siehe color

Beschreibung

Die -webkit-border-before-Eigenschaft wird einer physischen Rahmenkante entsprechend dem Schreibmodus, der Richtung und der Textorientierung des Elements zugeordnet. Sie entspricht der Eigenschaft border-top, border-right, border-bottom oder border-left abhängig von den definierten Werten für writing-mode, direction und text-orientation.

Sie steht in Bezug zu -webkit-border-after, -webkit-border-start und -webkit-border-end, welche die anderen Rahmenkanten des Elements definieren.

Die standardisierte Entsprechung dieser Eigenschaft ist border-block-start.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente
VererbtJa
Prozentwertewie die jeweiligen Kurzschreibweisen:
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypdiskret

Formale Syntax

-webkit-border-before =
  <'border-width'> || <'border-style'> || <color>

Beispiele

Anwenden eines Rahmens mit vertikalem Text

HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  -webkit-border-before: 5px dashed blue;
}

Ergebnis

Spezifikationen

Kein Bestandteil eines Standards, jedoch in Bezug auf die standardisierte border-block-start-Eigenschaft.

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-webkit-border-before
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.

Siehe auch