Thanks to visit codestin.com
Credit goes to developer.mozilla.org

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

border-inline

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2021⁩.

Die border-inline CSS Eigenschaft ist eine Shorthand-Eigenschaft, um die individuellen logischen Inline-Randwerte an einer einzigen Stelle im Stylesheet festzulegen.

Probieren Sie es aus

border-inline: solid;
writing-mode: horizontal-tb;
border-inline: dashed red;
writing-mode: vertical-rl;
border-inline: 1rem solid;
writing-mode: horizontal-tb;
direction: rtl;
<section class="default-example" 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: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Die physischen Ränder, auf die border-inline abbildet, hängen vom Schreibmodus, der Richtung und der Textausrichtung des Elements ab. Sie entspricht den Eigenschaften border-top und border-bottom oder border-right, und border-left, abhängig von den definierten Werten für writing-mode, direction, und text-orientation.

Die Ränder in der anderen Dimension können mit border-block gesetzt werden, das border-block-start und border-block-end festlegt.

Zusammengesetzte Eigenschaften

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

Syntax

css
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

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

Werte

Das border-inline wird mit einem oder mehreren der folgenden Werte in beliebiger Reihenfolge angegeben:

<'border-width'>

Die Breite des Randes. Siehe border-width.

<'border-style'>

Der Linienstil des Randes. Siehe border-style.

<color>

Die Farbe des Randes.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

border-inline = 
<'border-block-start'>

<border-block-start> =
<line-width> ||
<line-style> ||
<color>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

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

Beispiele

Rand 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;
  border-inline: 5px dashed blue;
}

Ergebnisse

Spezifikationen

Specification
CSS Logical Properties and Values Level 1
# propdef-border-inline

Browser-Kompatibilität

Siehe auch