border-block-start-style

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-start-style définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à border-top-style, border-right-style, border-bottom-style ou à border-left-style selon les valeurs de writing-mode, direction et text-orientation.

Exemple interactif

border-block-start-style: dotted;
writing-mode: horizontal-tb;

border-block-start-style: dotted;
writing-mode: vertical-rl;

border-block-start-style: groove;
writing-mode: horizontal-tb;

border-block-start-style: dashed;
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: #eee;
  color: #000;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :

Syntaxe

css

/* border-block-start-style: style */
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;

Valeurs

<'border-style'>: Le style utilisé pour la ligne de la bordure, voir border-style.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

border-block-start-style = 
  <line-style>  

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

Exemples

CSS

css

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

.exemple {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-start-style: dashed;
}

HTML

html

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

Résultat

Spécifications

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

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