---
title: "形状トークン"
description: "角丸の半径のスケールと、角の曲がり方を決める 1 つの数値。"
url: "https://tanrei.chnotchy.com/ja/tokens/shape/"
last_updated: 2026-10-23T17:33:05.000Z
---

# 形状トークン

> 角丸の半径のスケールと、角の曲がり方を決める 1 つの数値。

`tanrei.sys.shape.corner` 以下にある角丸の半径です。使い方の指針は、[形状](https://tanrei.chnotchy.com/ja/foundations/shape/)を参照してください。

| トークン | 値 | 備考 |
| --- | --- | --- |
| `--tanrei-sys-shape-corner-none` | 0px |  |
| `--tanrei-sys-shape-corner-extra-small` | 3px |  |
| `--tanrei-sys-shape-corner-small` | 6px | Default for controls: buttons, inputs, menu items, tooltips. |
| `--tanrei-sys-shape-corner-medium` | 8px |  |
| `--tanrei-sys-shape-corner-large` | 12px |  |
| `--tanrei-sys-shape-corner-large-increased` | 14px |  |
| `--tanrei-sys-shape-corner-extra-large` | 16px |  |
| `--tanrei-sys-shape-corner-extra-large-increased` | 20px |  |
| `--tanrei-sys-shape-corner-extra-extra-large` | 24px |  |
| `--tanrei-sys-shape-corner-full` | 9999px | Opt-in only: avatars, badges, segmented controls, pill variants. |

生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/shape.tokens.json`

## 角のスムージング

`tanrei.sys.shape.corner-smoothing` は 0 から 1 の量で、意味は Figma と同じです。0 は四分円、0.6 は Figma が「iOS の角」と呼ぶ値、1 は最もなだらかな角です。この値で半径が変わることはありません。この量の意味は Figma の作図そのものです。Compose と Flutter はその作図を描き、Web は最も近いスーパー楕円を、SwiftUI と iOS の React Native は OS の曲線を描きます（それぞれの差は[形状](https://tanrei.chnotchy.com/ja/foundations/shape/#%E8%A7%92%E3%81%AE%E3%82%B9%E3%83%A0%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0)にあります）。同梱システムごとの値は次のとおりです。

| デザインシステム | `corner-smoothing` |
| --- | --- |
| `tanrei` | 0 |
| `cupertino` | 0.6 |
| `m3-expressive-like` | 0 |
| `m3-like` | 0 |

生成元 `tokens/systems/*.system.json`, `design/tokens/<system>/tanrei.light.tokens.json`