<div class="container">
  <fieldset>
    <legend>Direction</legend>
    <div class='radio-buttons'>
      <div>
        <input type="radio" id="ltr" name="direction" value="ltr" checked>
        <label for="ltr">ltr</label>
      </div>
      <div>
        <input type="radio" id="rtl" name="direction" value="rtl">
        <label for="rtl">rtl</label>
      </div>
    </div>
  </fieldset>

  <div class="demo">
    <div class="content">
      <p>I am a sentence that uses physical properties for border radius.</p>
    </div>
    <div class="content">
      <p>I am a sentence that uses logical properties for border radius.</p>
    </div>
  </div>
</div>
:root {
  --fs: 1.125rem;
  --ff-default: system-ui, sans-serif;
  --clr-primary: hotpink;
  --direction: ltr;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-size: var(--fs);
  font-family: var(--ff-default);
  background-color: black;
  color: white;
  accent-color: var(--clr-primary);
  padding: 1em;
}

fieldset {
  width: fit-content;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  margin-bottom: 1em;
}

legend {
  padding: 0em 0.25em;
}

.container {
  width: fit-content;
}

.radio-buttons {
  display: flex;
  gap: 2em;
}

.content {
  border: 2px solid var(--clr-primary);
  padding: 1em;
  direction: var(--direction);
}

.content:nth-of-type(1) {
  border-bottom-right-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  margin-block-end: 1em;
}

.content:nth-of-type(2) {
  border-start-end-radius: 1em;
  border-end-start-radius: 1em;
  border-end-end-radius: 1em;
}

.content p {
  max-inline-size: 22ch;
}
const radioBtns = document.querySelectorAll('input[name="direction"]');

radioBtns.forEach((radioBtn) => {
  radioBtn.addEventListener("click", () => {
    const selectedRadioBtn = radioBtn.value;

    if (selectedRadioBtn === "ltr") {
      document.documentElement.style.setProperty("--direction", "ltr");
    } else if (selectedRadioBtn === "rtl") {
      document.documentElement.style.setProperty("--direction", "rtl");
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.