Logical properties

See it working

The syntax

.note {
  border-inline-start: 4px solid;
  padding-inline: 16px;
  margin-block: 12px;
}

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable .dm-lp { display: grid; gap: 10px; } .dm-lp-note { margin: 0; padding-block: 12px; padding-inline: 16px; border-inline-start: 4px solid #f05a28; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.5; color: #1c1f2a; }

ResetCopy

For browsers without it

No fallback is needed for current browsers. The same rule styled both paragraphs above: one declaration, two writing directions, and the bar moved by itself.