Skip to content

[Renderers/Raylib] Clamp border corner radius to element size - #626

Open
rizukirr wants to merge 1 commit into
nicbarker:mainfrom
rizukirr:fix/raylib-border-radius-clamp
Open

rizukirr wants to merge 1 commit into
nicbarker:mainfrom
rizukirr:fix/raylib-border-radius-clamp

Conversation

@rizukirr

@rizukirr rizukirr commented May 22, 2026

Copy link
Copy Markdown

Discovered while building ccompose, a small C11 UI library on top of Clay — bordered pill-shaped elements (cornerRadius = 999) drew curved lines across the rest of the layout.

Problem

When Clay_BorderRenderData.cornerRadius for any corner exceeds half the element's shorter side, the raylib renderer's border code draws a DrawRing arc with its center positioned outside the element's bounding box. The result is huge ring arcs that sweep across the rest of the layout.

This shows up easily with a pill-shaped element using a sentinel radius (e.g. 999) plus a thin border — common pattern for chips, badges, toggle pills.

Cause

In the CLAY_RENDER_COMMAND_TYPE_BORDER case, each DrawRing(center, innerRadius, outerRadius, ...) is called with the raw pixel value of config->cornerRadius.{topLeft,topRight,bottomLeft,bottomRight}. The center for each corner ring is computed as boundingBox.{corner} ± cornerRadius, so when cornerRadius > element_size, the center lands outside the element and the ring is drawn with that huge radius.

DrawRing does no internal clamping, so the arc renders wherever the geometry lands.

Repro

Any element where a corner radius exceeds half the element's shorter side, combined with a non-zero border width:

CLAY({
    .layout          = { .sizing = { CLAY_SIZING_FIXED(120), CLAY_SIZING_FIXED(24) } },
    .backgroundColor = { 40, 40, 50, 255 },
    .cornerRadius    = CLAY_CORNER_RADIUS(999),
    .border          = { .color = { 80, 80, 100, 255 },
                         .width = { 1, 1, 1, 1, 0 } },
}) { /* ... */ }

Before the patch this draws four arcs centered ~999px outside the element corners, painting curved lines across whatever else is on screen.

Fix

Compute maxRadius = min(boundingBox.width, boundingBox.height) / 2.0f once at the top of the border case, derive four clamped per-corner locals, and use those locals in every DrawRectangleV and DrawRing call in the block.

Behavior is unchanged when radii already fit the element. Over-large radii now produce the maximum pill/circle shape that fits inside the bbox, which is the intuitive result.

Diff size: 17 insertions / 12 deletions, all inside the existing CLAY_RENDER_COMMAND_TYPE_BORDER block. No new helpers, no API change, no behavior change for existing well-formed inputs.

Note on the rectangle path

The rectangle path (CLAY_RENDER_COMMAND_TYPE_RECTANGLE) doesn't have this bug because it uses DrawRectangleRounded(rect, roundness, segments, color) with a normalized roundness = (cornerRadius * 2) / min(width, height), and raylib's DrawRectangleRounded caps roundness at 1.0 internally. That's incidental to how DrawRectangleRounded consumes its input, not the result of explicit clamping in this file — the border path uses DrawRing which takes raw pixel radii and needs the clamp added here.

Scope

  • Only the raylib renderer is touched. Other renderers (web / SDL2 / SDL3 / etc) may or may not have a similar issue depending on the draw primitives they use; that's a separate audit.
  • Clay's core does not normalize cornerRadius before emitting commands. Doing it there would benefit every renderer uniformly but is a larger change with cross-renderer impact — out of scope for this fix.

Tested

  • Reproduced in ccompose's showcase demo (a header version pill and a toggle pill, both RadiusAll(999) + 1px border) — cross-window arcs appeared exactly where the bug predicts.
  • Removed the bordered elements as a workaround in the demo — confirmed the arcs originated from the border path.
  • Applied this patch to ccompose's vendored copy of the renderer and rebuilt — arcs gone, borders render as clean pill outlines.

@rizukirr
rizukirr force-pushed the fix/raylib-border-radius-clamp branch from 020694f to bd9e2f2 Compare May 22, 2026 09:49
yuval-herman added a commit to yuval-herman/Planet-Wars-Runner that referenced this pull request Aug 30, 2026
yuval-herman added a commit to yuval-herman/Planet-Wars-Runner that referenced this pull request Aug 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant