<ul class="select">
  <li>
    <label>
      <input type="radio" name="writingmode" value="horizontal-tb" checked />
      horizontal-tb
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="writingmode" data-dir="rtl" value="horizontal-tb" />
      horizontal-tb (rtl)
    </label>    
  </li>
  <li>
    <label>
      <input type="radio" name="writingmode" value="vertical-rl" />
      vertical-rl
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="writingmode" value="vertical-lr" />
      vertical-lr
    </label>    
  </li>
</ul>
<div class="container">
  <div class="box">
    Change the writing mode and play with the values below to get a better grasp on what's happening here.
    <div class="line inset-block-start">
      <span class="line-value"></span>
    </div>
    <div class="line inset-inline-end">
      <span class="line-value"></span>
    </div>
    <div class="line inset-block-end">
      <span class="line-value"></span>
    </div>
    <div class="line inset-inline-start">
      <span class="line-value"></span>
    </div>
  </div>
</div>

<pre class="code-container"><span class="token-selector">.element</span> { 
  <span class="token-property">inset-inline-start</span>: <input type="text" data-property="inset-inline-start" class="token-function" />;
  <span class="token-property">inset-block-start</span>: <input type="text" data-property="inset-block-start" class="token-function" />;
  <span class="token-property">inset-inline-end</span>: <input type="text" data-property="inset-inline-end" class="token-function" />;
  <span class="token-property">inset-block-end</span>: <input type="text" data-property="inset-block-end" class="token-function" />;
}</pre>  

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #3e464c;
  margin: 0;
  min-height: 100vh;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
}

.select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;  
  gap: .5em 1em;
  margin-bottom: 4em;
  padding: 0;
  list-style-type: none;
  color: #fff;
}



.select label {
  cursor: pointer;
}

.container {
  --color: #e91e63;
  --border: #fff;
  --inset-block-start:100px;
  --inset-inline-end:150px;
  --inset-block-end:200px;
  --inset-inline-start:250px;  
  --writing-mode: horizontal-lr;

  position: relative;
  background-color: #363f45;
  width: 580px;
  height: 580px;
  writing-mode: var(--writing-mode);
}

.box {
  padding: 1em;
  font-family: cursive;
  line-height: 1.9;
  border-radius: 2px;
  color: #fff;
  position: absolute;
  background-color: var(--color);
  inset: var(--inset-block-start) var(--inset-inline-end) var(--inset-block-end) var(--inset-inline-start);
  inset-block-start: var(--inset-block-start);
  inset-block-end: var(--inset-block-end);
  inset-inline-start: var(--inset-inline-start);
  inset-inline-end: var(--inset-inline-end);  
}

.line { 
  position: absolute;
  margin: auto;  
}

.line-value {
  position: absolute;
  background-color: #E6DB74;
  color: #1b1b1b;
  padding-inline: .5em;
  border-radius: 3px;
  font-size: .7em;
}

.inset-block-start .line-value {
  inset-block-start: 10px;
  inset-inline-start: 10px;
}

.inset-inline-end .line-value {
  inset-block-start: 10px;
  inset-inline-end: 10px;
}

.inset-block-end .line-value {
  inset-block-end: 10px;
  inset-inline-start: 10px;
}

.inset-inline-start .line-value {
  inset-block-start: 10px;
  inset-inline-start: 10px;
}

.inset-block-start {
  block-size: var(--inset-block-start);  
  inline-size: 0;
  border-inline-start: 2px dashed var(--border);  
  inset-block-start: auto;
  inset-block-end: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;  
}

.inset-inline-end {
  block-size: 0;  
  inline-size: var(--inset-inline-end);
  border-block-start: 2px dashed var(--border);  
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 100%;
  inset-inline-end: auto;  
}

.inset-block-end {
  block-size: var(--inset-block-end);  
  inline-size: 0;
  border-inline-start: 2px dashed var(--border);  
  inset-block-start: 100%;
  inset-block-end: auto;
  inset-inline-start: 0;
  inset-inline-end: 0;  
}

.inset-inline-start {
  block-size: 0;  
  inline-size: var(--inset-inline-start);
  border-block-start: 2px dashed var(--border);  
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: auto;
  inset-inline-end: 100%;  
}

.code-container {
  display: table;  
  position: relative;
  font-size: 16px;
  background-color: #272822;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 2em auto 0;
  padding: .5em;
  color: #F8F8F2;
  text-align: left;
  line-height: 1.5;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);  
}

.token-property {
  color: #F92672;
}

.token-function {
  color: #E6DB74;
}

.token-selector {
  color: #a6e22e;
}

.token-comment {
  color: slategray;
}

input[type="text"] {
  border: 0;
  background: none;
  width: 40px;
  font-size: .8em;
}

input[type="text"]:focus {
  border: 1px solid currentColor;
}

@supports not (inset: 1px) {
  body::before {    
    content: "Your browser doesn't support inset property";
    display: block;
    color: #e43;
    font-weight: bold;
    background-color: #fff;
    padding: 1em;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
  }
}

    var container = document.querySelector('.container');

    document.addEventListener('click', function (event) {
      var ele = event.target.closest('input[type="radio"]');
      if (!ele) return;
      
      if (ele.getAttribute('data-dir')) {
        container.setAttribute('dir', 'rtl');
      }
      
      else {
        container.setAttribute('dir', 'ltr');
      }
      
      container.style.setProperty('--writing-mode', ele.value);
    });

    var inputs = document.querySelectorAll('input[type="text"]');

    for (var i = 0; i < inputs.length; i++) {      
      inputs[i].value = getComputedStyle(container).getPropertyValue('--'+inputs[i].getAttribute('data-property'));

      document.querySelector('.'+inputs[i].getAttribute('data-property')).querySelector('span').textContent = getComputedStyle(container).getPropertyValue('--'+inputs[i].getAttribute('data-property'));

      inputs[i].addEventListener('input', function () {
        container.style.setProperty('--'+this.getAttribute('data-property'), this.value);
        document.querySelector('.'+this.getAttribute('data-property')).querySelector('span').textContent = this.value;        
      }, false);
    }