border-inline-end

La propriété border-inline-end est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de border-inline-end-width, border-inline-end-style et border-inline-end-color.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés border-top, border-right, border-bottom ou border-left selon les valeurs utilisées pour writing-mode, direction et text-orientation.

On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :

• border-block-start,
• border-block-end,
• border-inline-start.

Syntaxe

border-inline-end: 1px;
border-inline-end: 2px dotted;
border-inline-end: medium dashed green;

Valeurs

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

<'border-width'>

La largeur de la bordure pour ce côté, voir border-width.

<'border-style'>

Le style de la ligne utilisé pour la bordure de ce côté, voir border-style.

<'color'>

La couleur de la bordure sur ce côté, voir color.

Syntaxe formelle

<'border-top-width'> || <'border-top-style'> || <'color'>
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
où 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

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

.exemple {
  writing-mode: vertical-rl;
  border-inline-end: 5px dashed blue;
}

HTML

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

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés physiques correspondantes :
  • border-top,
  • border-right,
  • border-bottom,
  • border-left
• writing-mode, direction, text-orientation