<main>
      <div class="wrapper">
        <article class="flow">
          <h1>Logical properties and borders</h1>
          <figure class="callout">
            <p>
              Toggle the <code>direction</code> to see how the borders and rounded corners
              respond.
            </p>
          </figure>
          <label class="toggle" for="toggle-element">
            <span class="toggle__label">Toggle direction</span>
            <input
              type="checkbox"
              role="switch"
              class="toggle__element"
              id="toggle-element"
            />
            <div class="toggle__decor" aria-hidden="true">
              <div class="toggle__thumb"></div>
            </div>
          </label>
          <div class="my-element">
            <pre><code>.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}</code></pre>
          </div>
          <div class="my-element">
            <pre><code>.my-element {
	border-block-end: 1px solid red;
	border-inline-end: 1px solid red;
	border-end-end-radius: 1em;
}</code></pre>
          </div>
        </article>
      </div>
    </main>
:root {
  --direction: ltr;
}


.my-element {
  padding: 0.25em;
  direction: var(--direction);
}

.my-element:nth-of-type(1) {
	border-bottom: 1px solid red;
	border-right: 1px solid red;
	border-bottom-right-radius: 1em;
}

.my-element:nth-of-type(2) {
	border-block-end: 1px solid red;
	border-inline-end: 1px solid red;
	border-end-end-radius: 1em;
}
const toggle = document.querySelector('#toggle-element');

toggle.addEventListener('change', evt => {
  document.documentElement.style.setProperty(
    '--direction',
    evt.target.checked ? 'rtl' : 'ltr'
  );
});

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.