Propriété CSS `border-inline-end-width`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

En savoir plus
Voir la compatibilité complète

La propriété CSS border-inline-end-width définit la largeur de la bordure logique en ligne de fin d'un élément, qui correspond à une bordure physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle correspond à la propriété border-top-width, border-right-width, border-bottom-width, ou border-left-width, selon les valeurs définies pour writing-mode, direction et text-orientation.

Exemple interactif

border-inline-end-width: thick;
writing-mode: horizontal-tb;

border-inline-end-width: thick;
writing-mode: vertical-rl;

border-inline-end-width: 4px;
writing-mode: horizontal-tb;
direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec une bordure autour.
  </div>
</section>

#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntaxe

css

/* Valeurs de type <'line-width'> */
border-inline-end-width: 2px;
border-inline-end-width: thick;

/* Valeurs globales */
border-inline-end-width: inherit;
border-inline-end-width: initial;
border-inline-end-width: revert;
border-inline-end-width: revert-layer;
border-inline-end-width: unset;

Valeurs

<line-width>: Définit la largeur de la bordure, soit par une valeur explicite de type <length> positive, soit par un mot-clé. Les mots-clés possibles sont : thin, medium ou thick. La valeur par défaut est medium.

Définition formelle

Valeur initiale	`medium`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	the absolute `<length>`, snapped as a line width
Type d'animation	par type de valeur calculée

Syntaxe formelle

border-inline-end-width = 
  <line-width>  

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

Exemples

Appliquer une bordure avec texte vertical

HTML

html

<div>
  <p class="exempleTexte">Texte d'exemple</p>
</div>

CSS

css

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

.exempleTexte {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-end-width: 5px;
}