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-end-color

Baseline Widely available

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

Die border-inline-end-color CSS Eigenschaft definiert die Farbe des logischen inline-end Rahmens eines Elements, die je nach Schreibmodus, Richtung und Textorientierung des Elements auf eine physische Rahmenfarbe abgebildet wird. Sie entspricht der border-top-color, border-right-color, border-bottom-color, oder border-left-color Eigenschaft, je nach den festgelegten Werten für writing-mode, direction, und text-orientation.

Probieren Sie es aus

border-inline-end-color: red;
writing-mode: horizontal-tb;
border-inline-end-color: #32a1ce;
writing-mode: vertical-rl;
border-inline-end-color: rgb(170 50 220 / 0.6);
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: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

css
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;

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

Verwandte Eigenschaften sind border-block-start-color, border-block-end-color, und border-inline-start-color, welche die anderen Rahmenfarben des Elements definieren.

Werte

<color>

Die Farbe des Rahmens.

Formale Definition

Anfangswertcurrentcolor
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertberechnete Farbe
Animationstypby computed value type

Formale Syntax

border-inline-end-color = 
<color> |
<image-1D>

<image-1D> =
<stripes()>

<stripes()> =
stripes( <color-stripe># )

<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?

<length-percentage> =
<length> |
<percentage>

Beispiele

HTML

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

CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-end-color: red;
}

Spezifikationen

Specification
CSS Logical Properties and Values Level 1
# border-color

Browser-Kompatibilität

Siehe auch