import { Meta } from "@storybook/addon-docs";

import { radii } from "tokens";

import { TokensGrid } from "../../components/TokensGrid";

<Meta title="Tokens/Border Radius" />

[![Radii Tokens](https://raw.githubusercontent.com/showC0de-proFile/logos/main/label-radii.svg)](https://raw.githubusercontent.com/showC0de-proFile/logos/main/label-radii.svg)

# Border Radius

Border radius is a fundamental concept in interface design that refers to the rounding of the corners of an element. It allows you to create visually appealing and softer edges for various components, such as buttons, boxes, cards, and images.

<TokensGrid tokens={radii} />