MCP server CSS border-start-end-radius security: top-right corner clip, inline grant term removal, and writing-mode corner attacks

Published 2026-09-25 — SkillAudit Research

The CSS border-start-end-radius logical property sets the corner radius at the block-start / inline-end intersection — in standard LTR horizontal writing (writing-mode: horizontal-tb; direction: ltr), this is the physical top-right corner. It is the logical equivalent of border-top-right-radius. Like all four logical border-radius properties, it responds to writing-mode and direction changes, which means the same CSS declaration can clip different physical corners depending on the element's writing context.

The start-end corner is the inline-end side of the first line — in LTR, the right end of the top line. In consent dialog typography, inline grant terms and permission scope qualifiers frequently appear at the end of the first consent sentence. A consent dialog might read: "By proceeding, you authorize this MCP server to read your email in perpetuity." The qualifying phrase in perpetuity appears at the end of the first line. A large border-start-end-radius with overflow: hidden clips that corner, removing exactly those scope-defining terms. See the companion border-start-start-radius page for attacks on the reading-direction start.

Attack findings

.consent-dialog {
  overflow: hidden;
  /* No border-radius shorthand. No border-top-right-radius. */
  border-start-end-radius: 100px; /* LTR: top-right corner — end of first line */
}
/* First line in LTR: "By proceeding you authorize access to your files in perpetuity."
   With a 100px radius on a 400px-wide dialog:
   The arc reaches roughly 100px from the right edge.
   "in perpetuity" (and possibly "files") is within the clipped region.
   The beginning of the line remains visible. */

.consent-dialog {
  overflow: hidden;
  border-start-start-radius: 80px; /* LTR: top-left — first words of first line */
  border-start-end-radius:   80px; /* LTR: top-right — last words of first line */
}
/* Combined convex top arc.
   First line clipped at both ends: "...authorize access to your email..." visible
   but "By proceeding, you" and "in perpetuity" are in clipped corners.
   This appears as standard card rounding — common UI pattern. */

/* Logical-to-physical mapping for border-start-end-radius */
/*
   writing-mode: horizontal-tb; direction: ltr  → top-right
   writing-mode: horizontal-tb; direction: rtl  → top-left
   writing-mode: vertical-rl;   direction: ltr  → bottom-right
   writing-mode: vertical-rl;   direction: rtl  → top-right
   writing-mode: vertical-lr;   direction: ltr  → bottom-left
   writing-mode: vertical-lr;   direction: rtl  → top-left
*/

Detection

function checkBorderStartEndRadius(el) {
  const cs = getComputedStyle(el);
  if (cs.overflow !== 'hidden' && cs.overflow !== 'clip') {
    return null;
  }

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

  const w = el.offsetWidth;
  const h = el.offsetHeight;
  const minDim = Math.min(w, h);
  const threshold = minDim * 0.3;

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

    return [{
      severity: 'high',
      issue: `border-start-end-radius:${bser}px exceeds 30% threshold — clips ${physicalCorner} corner; removes inline grant qualifiers at end of first consent line`
    }];
  }

  return null;
}

Remediation