border-block

Exemple interactif

border-block: solid;
writing-mode: horizontal-tb;

border-block: dashed red;
writing-mode: vertical-rl;

border-block: 1rem solid;
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: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• border-block-color
• border-block-style
• border-block-width

Syntaxe

border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

/* Valeurs globales */
border-block: inherit;
border-block: initial;
border-block: revert;
border-block: revert-layer;
border-block: unset;

Valeurs

La propriété border-block peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.

<'border-width'>

La largeur de la bordure. Voir border-width.

<'border-style'>

Le style pour la ligne de la bordure. Voir border-style.

<color>

La couleur de la bordure.

Description

border-block peut être utilisée afin de définir une ou plusieurs propriétés parmi border-block-width, border-block-style et border-block-color. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de bloc. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à border-top et border-bottom ou à border-right et border-left selon les valeurs des propriétés writing-mode, direction et text-orientation.

Les bordures sur l'autre dimension peuvent être définies grâce à border-inline, (qui est la proprété raccourcie pour border-inline-start et border-inline-end).

Définition formelle

Syntaxe formelle

border-block = 
  <'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  

Exemples

Bordure avec du texte vertical

HTML

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

CSS

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

.exempleTexte {
  writing-mode: vertical-rl;
  border-block: 5px dashed blue;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Propriétés et valeurs logiques CSS
• Cette propriété correspond à l'une des propriétés physiques de bordure : border-top, border-right, border-bottom ou border-left.
• Les propriétés writing-mode, direction, text-orientation