[motion-1] Define or clarify the motion path along the inner side of the border

[yisibl]

If is omitted, it defaults to inset(0 round X), where X is the value of border-radius on the element that establishes the containing block for this element.

In the current definition with offset-path: content-box, the element cannot move along the inside of the border (the blue border in the video). Manually fine-tuning the X value in round X is painful and would like a way to achieve such a motion path. This is very useful when implementing some animations of the border.

Likewise, there doesn't seem to be a way to move along the outside of the border.

https://github.com/w3c/csswg-drafts/assets/2784308/28f7e9fb-0427-45c6-bf19-399aaa0ad607

:root {
  --r: 60px 120px / 100px 30px;
}
#outer {
  margin: 60px auto;
  position: relative;
  width: 500px;
  height: 200px;
  border: 30px solid blue;
  border-radius: var(--r);
}
#red-box {
  width: 0;
  height: 0;
  offset-path: content-box;
  offset-distance: -3%;
  offset-rotate: auto 0deg;
  outline: 6px solid red;
  position: absolute;
}

Expected

Currently, we need to fit the rounded corners with the following CSS, which is troublesome once the border-radius of the containing block has changed.

#red-box {
  offset-path: inset(0 round 30px 0px / 70px 0px) content-box;
}

https://github.com/w3c/csswg-drafts/assets/2784308/eb7c025e-b625-48fa-82dd-19fa556c50ff