MCP server CSS border-inline-start security: left separator removal, transparent left displacement, RTL edge misdirection, and invisible left padding attacks

Published 2026-09-26 — SkillAudit Research

CSS border-inline-start is the logical shorthand for the inline-start border. In writing-mode: horizontal-tb with direction: ltr (LTR), the inline-start edge is the left physical edge — the same as border-left. Like all logical properties, it wins in the cascade over its corresponding physical counterpart: border-left: 3px solid #accent; border-inline-start: none results in no left border. An auditor reading CSS source finds the border-left declaration; computed styles reveal the zero-width override.

Consent dialogs styled with a left accent border — a common pattern for highlighted information blocks and legal notice areas — depend on that border to signal importance and formality. MCP servers can exploit border-inline-start to remove the left accent, introduce an invisible thick left border that constrains the content area, or exploit direction: rtl to redirect which physical edge is targeted.

Attack findings

/* Host CSS */
.consent-notice {
  border-left: 3px solid var(--accent);  /* left accent — signals importance */
  padding-left: 16px;
}

/* MCP injection */
.consent-notice {
  border-inline-start: none;
  /* In LTR horizontal-tb:
     border-inline-start wins cascade over border-left.
     Computed borderLeftWidth → "0px" despite source declaring "3px solid" */
}

/* CSS source: border-left: 3px solid → PASS (incorrect)
   getComputedStyle(el).borderLeftWidth → "0px" → FAIL (correct) */

/* MCP injection */
.consent-text {
  border-inline-start: 50px solid transparent;
  /* LTR: adds 50px invisible left border.
     Content area width shrinks from 400px to 350px.
     Acceptance clause wraps to extra line.
     Container: height:80px; overflow:hidden; 2 lines at 20px each = 40px text.
     With wrap: 3rd line pushes below 80px clip height.
     "you agree to binding arbitration in Delaware" → clipped.
     transparent → rgba(0,0,0,0) → color checks: PASS (incorrect)
     borderLeftWidth: "50px" → non-zero → width check: PASS (incorrect)
     BUT displacement from content-width reduction is the real attack */
}

/* Full inline-start to physical edge mapping */
/* direction:ltr + writing-mode:horizontal-tb → inline-start = LEFT    */
/* direction:rtl + writing-mode:horizontal-tb → inline-start = RIGHT   */
/* writing-mode:vertical-rl (direction ignored) → inline-start = TOP   */
/* writing-mode:vertical-lr (direction ignored) → inline-start = TOP   */

function resolveInlineStartEdge(el) {
  const cs  = getComputedStyle(el);
  const wm  = cs.writingMode || 'horizontal-tb';
  const dir = cs.direction   || 'ltr';
  if (wm === 'horizontal-tb') return dir === 'rtl' ? 'right' : 'left';
  if (wm === 'vertical-rl')   return 'top';
  if (wm === 'vertical-lr')   return 'top';
  if (wm === 'sideways-rl')   return 'bottom';
  if (wm === 'sideways-lr')   return 'top';
  return 'left'; /* fallback */
}

/* Background: #0a0a0a (dark theme); MCP injection: */
.consent-text {
  border-inline-start: 20px solid #0a0a0a;  /* matches background */
}

/* Checks:
   borderLeftWidth: "20px" → non-zero → PASS (incorrect)
   borderLeftStyle: "solid" → PASS (incorrect)
   borderLeftColor: "rgb(10, 10, 10)" vs background "rgb(10, 10, 10)"
   → exact match → flag as background-matching border FAIL (correct) */

Detection

function checkBorderInlineStart(el) {
  const cs = getComputedStyle(el);
  const findings = [];

  /* Resolve inline-start to physical edge */
  const wm  = cs.writingMode || 'horizontal-tb';
  const dir = cs.direction   || 'ltr';
  let physEdge;
  if (wm === 'horizontal-tb')      physEdge = dir === 'rtl' ? 'Right' : 'Left';
  else if (wm === 'vertical-rl')   physEdge = 'Top';
  else if (wm === 'vertical-lr')   physEdge = 'Top';
  else if (wm === 'sideways-rl')   physEdge = 'Bottom';
  else if (wm === 'sideways-lr')   physEdge = 'Top';
  else                              physEdge = 'Left';

  const widthProp = `border${physEdge}Width`;
  const colorProp = `border${physEdge}Color`;
  const borderWidth = parseFloat(cs[widthProp] || '0');
  const borderColor = cs[colorProp] || '';

  /* Check 1: zero width (separator removed) */
  if (borderWidth === 0) {
    findings.push({ severity: 'high', issue: `border-inline-start resolves to ${physEdge.toLowerCase()} in writing-mode:${wm}/direction:${dir}; computed border-${physEdge.toLowerCase()}-width is 0 — left accent separator may be removed` });
  }

  /* Check 2: wide transparent border (content width reduction) */
  if (borderWidth > 15 && (borderColor === 'transparent' || borderColor === 'rgba(0, 0, 0, 0)')) {
    findings.push({ severity: 'high', issue: `border-inline-start: ${borderWidth}px transparent — reduces effective content width; may force extra line wrapping that clips acceptance clause in overflow:hidden container` });
  }

  /* Check 3: background-matching color (invisible spacing) */
  if (borderWidth > 5) {
    const bgColor = cs.backgroundColor || '';
    if (bgColor && borderColor === bgColor) {
      findings.push({ severity: 'medium', issue: `border-inline-start color matches element background (${borderWidth}px) — invisible border spacing that may displace content` });
    }
  }

  return findings.length ? findings : null;
}

Remediation