BorderRadius

Composite token translated into readily accessible Tailwind components. The generated classes accommodate the current text orientation (RTL or LTR).

Allowed units: px | % | rem | em
Default unit: px

All parameters

Single value

Number of values

Single value

Value example

CSS corners

6px all corners

Generated class

rounded-[6px]

Two values

Number of values

Two values

Value example

6 2

CSS corners

6px top-left-and-bottom-right

2px top-right-and-bottom-left

Generated class

rounded-ss-[6px] rounded-ee-[6px] rounded-se-[2px] rounded-es-[2px]

Three values

Number of values

Three values

Value example

6 2 4

CSS corners

6px top-left

2px top-right-and-bottom-lef

4px bottom-right

Generated class

rounded-ss-[6px] rounded-se-[2px] rounded-es-[2px] rounded-ee-[4px]

Four values

Number of values

Four values

Value example

6 2 4 8

CSS corners

6px top-left

2px top-right

4px bottom-right

8px bottom-left

Generated class

rounded-ss-[6px] rounded-se-[2px] rounded-ee-[4px] rounded-es-[8px]

Number of values	Value example	CSS corners	Generated class
Single value	6	6px all corners	rounded-[6px]
Two values	6 2	6px top-left-and-bottom-right 2px top-right-and-bottom-left	rounded-ss-[6px] rounded-ee-[6px] rounded-se-[2px] rounded-es-[2px]
Three values	6 2 4	6px top-left 2px top-right-and-bottom-lef 4px bottom-right	rounded-ss-[6px] rounded-se-[2px] rounded-es-[2px] rounded-ee-[4px]
Four values	6 2 4 8	6px top-left 2px top-right 4px bottom-right 8px bottom-left	rounded-ss-[6px] rounded-se-[2px] rounded-ee-[4px] rounded-es-[8px]

Example

tokens.json

{
  "global": {
    "my-border-radius": {
      "value": "10% 30% 50% 70%",
      "type": "borderRadius"
    }
  },
  "dark": {
    "my-border-radius": {
      "value": "10px 160px 6px",
      "type": "borderRadius"
    }
  }
}

Usage

page.tsx

<div className="my-border-radius w-24 h-24 bg-sd-my-color"/>

Render

LTR

RTL