Example: Outline Radius

Compute the outer-edge radius of an offset CSS outline's visual silhouette. Use this to drive the corner radius of a compensating rectangle in design tools (most commonly Figma) that cannot natively render outline-offset.

The Definition

outline-radius.module.scssdef

---
module: outline-radius
title: Outline Radius Compensation
summary: Outer-edge radius of a CSS outline with offset, for reproducing the silhouette in tools without native outline support.
category: geometry
since: 0.2.0
tags: [radius, outline, figma, geometry, tokens]
see: [radius]
---

/// @name outline-radius
/// @summary Outer-edge radius of an offset outline's visual silhouette.
/// @description Matches how modern browsers render a CSS `outline` when
///              `outline-offset` is set on an element with `border-radius`:
///              the outline's corners follow the element's curvature and
///              expand outward by the offset plus the outline width.
///              Use this to drive the corner radius of a compensating
///              rectangle in tools (e.g., Figma) that cannot natively
///              render `outline-offset`. FE consumers should ignore this —
///              the browser computes it automatically.
/// @param $inner <dimension|ref> Inner element's border-radius.
/// @param $offset <dimension|ref> The `outline-offset` value.
/// @param $width <dimension|ref> The `outline-width` value.
/// @returns <dimension>
/// @constraints $inner >= 0
/// @constraints $offset >= 0
/// @constraints $width > 0
/// @example outline-radius(20px, 4px, 2px) → 26px
/// @example outline-radius(8px, 4px, 2px) → 14px
/// @example outline-radius(0px, 4px, 2px) → 6px
@function outline-radius($inner, $offset, $width) {
  @return $inner + $offset + $width;
}

How It Works

1. outline-radius() takes the inner element's border-radius, the outline-offset, and the outline-width.
2. Returns $inner + $offset + $width — the outer radius the browser renders when the outline wraps the offset inner corner.

Modern browsers compute this automatically; the formula exists so design tools can match the exact silhouette by drawing a compensating rounded rectangle around the element. Front-end consumers should ignore the resulting token — the browser handles it.

Usage Examples

Standard focus ring

outline-radius(20px, 4px, 2px)   // → 26px

A 20px inner radius with a 4px offset and 2px outline ring renders with a 26px outer radius.

Small control

outline-radius(8px, 4px, 2px)   // → 14px

Sharp-cornered element

outline-radius(0px, 4px, 2px)   // → 6px

Even with zero inner radius, the offset outline still renders rounded.

DTCG Extension

{
  "focus-ring": {
    "outer-radius": {
      "$value": "26px",
      "$type": "dimension",
      "$extensions": {
        "org.dtcg-formulas": {
          "formula": "outline-radius({shape.radius.button}, {focus-ring.offset}, {focus-ring.width})",
          "definition": "tokens/functions/outline-radius/outline-radius.module.scssdef#outline-radius"
        }
      }
    }
  }
}

See Also

• Radius + Shape — the base radius adapter. outline-radius() wraps it for outline compensation; radius() is for the element itself.