border-block-end-width

Baseline Widely available

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⁩.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété border-block-end-width définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à border-top-width, border-right-width, border-bottom-width ou a border-left-width selon les valeurs des propriétés pour writing-mode, direction et text-orientation.

Exemple interactif

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

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

border-block-end-width: 4px;
writing-mode: horizontal-tb;

border-block-end-width: 4px;
writing-mode: vertical-lr;

<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: palegreen;
  color: #000;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Cette propriété logique est à rapprocher des autres propriétés logiques border-block-start-width, border-inline-end-width et border-inline-end-width qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.

Syntaxe

css

/* Valeur de longueur */
/* Type <length>      */
border-block-end-width: 5px;
border-block-end-width: thick;

Valeurs

<'border-width'>: La largeur utilisée pour la bordure, voir border-width.

Définition formelle

Valeur initiale	`medium`
Applicabilité	tous les éléments
Héritée	non
Pourcentages	largeur logique du bloc englobant
Valeur calculée	une longueur absolue ; `0` si le style de la bordure vaut `none` ou `hidden`
Type d'animation	by computed value type

Syntaxe formelle

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

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

Exemples

CSS

css

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

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

HTML

html

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

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi

Les propriétés physiques correspondantes :
writing-mode, direction, text-orientation

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨1 janv. 1970⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content