MCP server CSS border-start-start-radius security: top-left corner clip, reading-direction start attacks, and writing-mode corner rotation

Published 2026-09-25 — SkillAudit Research

The CSS border-start-start-radius logical property sets the corner radius at the block-start / inline-start intersection — in standard LTR horizontal writing (writing-mode: horizontal-tb; direction: ltr), this is the physical top-left corner. It is the logical equivalent of the first value of border-top-left-radius. Unlike physical border-radius properties, logical properties respond to changes in writing mode and text direction, which creates a class of attacks where the physical corner targeted by a given logical property changes as writing-mode or direction is modified.

This property targets a structurally significant corner: the reading-direction start. In Western LTR consent dialogs, text begins reading at the top-left corner. The first words on the first line of a consent dialog — typically the subject of the authorization sentence, e.g. "By installing this MCP server…" — appear exactly at the top-left. A large border-start-start-radius with overflow: hidden clips that corner, removing those first words. See the companion page border-end-end-radius for attacks on the acceptance clause at the reading-direction end.

Attack findings

.consent-dialog {
  overflow: hidden;
  /* No border-radius shorthand. No physical border-top-left-radius. */
  /* Logical property only — bypasses shorthand and physical property checks. */
  border-start-start-radius: 120px; /* LTR: clips top-left corner */
}
/* Text at top-left: "By installing this MCP server, you authorize..."
   The word "By" and surrounding area fall in the clipped quarter-circle.
   Permission list lower in the dialog: fully visible.
   Authorization framing: partially or fully clipped. */

/* Logical-to-physical mapping for border-start-start-radius */
/*
   writing-mode: horizontal-tb; direction: ltr  → top-left
   writing-mode: horizontal-tb; direction: rtl  → top-right
   writing-mode: vertical-rl;   direction: ltr  → top-right
   writing-mode: vertical-rl;   direction: rtl  → bottom-right
   writing-mode: vertical-lr;   direction: ltr  → top-left
   writing-mode: vertical-lr;   direction: rtl  → bottom-left
*/
/* Attacker sets border-start-start-radius once; changes writing-mode at runtime
   to rotate which physical corner is clipped. */

.consent-dialog {
  overflow: hidden;
  border-start-start-radius: 80px; /* LTR: top-left — clips line start */
  border-start-end-radius:   80px; /* LTR: top-right — clips line end */
}
/* Combined: top edge is an arc. First line of consent text:
   beginning (top-left) and end (top-right) are both within clipped regions.
   Middle of first line and all subsequent lines: visible.
   The arc looks like standard UI card rounding. */

Detection

function checkBorderStartStartRadius(el) {
  const cs = getComputedStyle(el);
  if (cs.overflow !== 'hidden' && cs.overflow !== 'clip') {
    return null; /* border-radius only clips content with overflow:hidden or overflow:clip */
  }

  const bssr = parseFloat(cs.getPropertyValue('border-start-start-radius') || '0');
  if (bssr === 0) return null;

  const w = el.offsetWidth;
  const h = el.offsetHeight;
  const minDim = Math.min(w, h);
  const threshold = minDim * 0.3; /* 30% of shortest dimension */

  if (bssr > threshold) {
    const wm = cs.writingMode || 'horizontal-tb';
    const dir = cs.direction || 'ltr';
    let physicalCorner = 'top-left';
    if (wm === 'horizontal-tb' && dir === 'rtl')  physicalCorner = 'top-right';
    if (wm === 'vertical-rl'   && dir === 'ltr')  physicalCorner = 'top-right';
    if (wm === 'vertical-rl'   && dir === 'rtl')  physicalCorner = 'bottom-right';
    if (wm === 'vertical-lr'   && dir === 'rtl')  physicalCorner = 'bottom-left';

    return [{
      severity: 'high',
      issue: `border-start-start-radius:${bssr}px exceeds 30% threshold — clips ${physicalCorner} corner; removes reading-direction start of consent text`
    }];
  }

  return null;
}

Remediation